const rootEl = document.getElementById('root'); ReactDOM.render( <BrowserRouter> <Switch> <Route exact path="/"> <MasterPage /> </Route> <Route exact path="/details/:id" > <DetailsPage /> </Route> </Switch> </BrowserRouter>, rootEl );Estoy tratando de acceder a la identificación en el componente DetailsPage pero no está accesible. Lo intenté
<DetailsPage foo={this.props}/>para pasar parámetros a la página de detalles, pero en vano.
export default class DetailsPage extends Component { constructor(props) { super(props); } render() { return ( <div className="page"> <Header /> <div id="mainContentContainer" > </div> </div> ); } }Entonces, ¿alguna idea de cómo pasar la identificación a la página de detalles?
Usé esto para acceder a la ID en mi componente:
<Route path="/details/:id" component={DetailsPage}/>Y en el componente de detalle:
export default class DetailsPage extends Component { render() { return( <div> <h2>{this.props.match.params.id}</h2> </div> ) } }Esto generará cualquier identificación dentro de un h2, espero que ayude a alguien.
Si desea pasar accesorios a un componente dentro de una ruta, la forma más sencilla es utilizar el render , así:
<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } /> Puede acceder a los accesorios dentro de DetailPage usando:
this.props.match this.props.globalStore Se necesita {...props} para pasar los accesorios de la ruta original; de lo contrario, solo obtendrá this.props.globalStore dentro de DetailPage .
Desde react-router v5.1 con ganchos:
import { useParams } from 'react-router'; export default function DetailsPage() { const { id } = useParams(); }