Pregunta: ¿Cómo puedo pasar una propiedad o un valor único, como un _id, a través del componente Link de React-Router y atraparlo en el punto final?
Esto es lo que quiero decir: digamos que estamos en la página /a. El enlace llevará al usuario a /b. Como tal <Link to='/b'> . Ahora, necesito pasar un _id a través del enlace, de /a a /b.
<Link to='/b' params={_id}>blah blah</Link>La identificación que estoy tratando de pasar es la propiedad de un objeto en el que está anidado el componente Enlace.
Encontré esta sintaxis params={} en otro hilo de StackOverflow. Mi código se compiló sin romperse, ¿entonces eso probablemente significa que funcionó? Sin embargo, no estoy seguro de cómo recuperar este valor pasado en el punto final.
Cualquier ayuda será apreciada.
Pasando accesorios
Puede pasar accesorios arbitrarios a una ruta a través del objeto de state :
<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link> Luego puede acceder al objeto de state desde dentro de su componente:
const {foo} = props.location.state console.log(foo) // "bar"Pasando parámetros
Configure su ruta de acceso para aceptar parámetros con nombre ( :id ):
<Route path='/route/:id' exact component={MyComponent} /> Luego puede pasar parámetros de URL como ID en su enlace to :
<Link to={`route/foo`}>My route</Link> Puede acceder al parámetro dentro de su componente a través del objeto de match :
const {id} = props.match.params console.log(id) // "foo"Fuentes
Para pasar datos a través del componente Enlace, es posible que desee aceptar un parámetro en el enlace real.
<Link to={`/b/${_id}`}>blah blah</Link>y en la Ruta, configurarías algo como esto
<Route path="b/:id" name="routename" component={foo}></Route>
Luego puede acceder al parámetro en la nueva ruta a través this.props.match.params.id
Si realmente no quiere su identificación en la ruta real, se vuelve un poco más molesto.
Si desea enviar más de un parámetro a través de una ruta, puede hacerlo así.
1. Elemento de enlace
<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click </Link>2. Configure su ruta de ruta para aceptar esos parámetros
<Route exact path="/exchangeClicked/:variable1,:variable2,:variable3" component={MyComponent} />3. A continuación, puede acceder al parámetro en la nueva ruta a través de,
<Typography variant="h4" color="inherit"> Exchange:{this.props.match.params.variable1} </Typography> <Typography variant="Body 1" color="inherit"> Type:{this.props.match.params.variable2} </Typography> <Typography variant="Body 1" color="inherit"> Durabiliy:{this.props.match.params.variable3} </Typography>