Soy nuevo en reaccionar. Tengo una ruta con un enrutador de reacción que toma :id como parámetro, ¿cómo hago coincidir esto usando la ubicación de uso de react-router-dom?
básicamente, la ruta puede ser posts o post/21 , ¿cómo hago coincidir la publicación/21 para representar un componente? Quiero representar un componente separado si estoy en la página de detalles
{path === 'post/:id' ? <PostDetail /> : <Posts /> } pero usar la ubicación devuelve posts/1 que no puedo usar para que coincida con el detalle de la publicación
resumen Any path that matches: post/:id
Por lo general, utilizará un componente Switch con un conjunto de componentes de Route . Cada Route toma un accesorio de ruta que se utiliza para hacer coincidir.
import React from 'react'; import { BrowserRouter, Switch, Route, useRouteMatch } from 'react-router-dom'; const App = (props) => { return ( <BrowserRouter> <Switch> <Route path="/post/:id"> <PostDetail /> </Route> <Route path="/post"> <Posts /> </Route> </Switch> </BrowserRouter> ); }; Los componentes que son hijos de una Route pueden usar el gancho useRouteMatch para acceder a los parámetros de la ruta.
const PostDetail = (props) => { const match = useRouteMatch(); return <h1>{match.params.id}</h1>; };