reactjs - medium - react router switch
Pasando props a través de React-Router v4<Link/> (3)
Para pasar datos a través del componente de 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 así.
<Route path="b/:id" name="routename" component={foo}></Route>
Luego puede acceder al parámetro en la nueva ruta a través de this.props.match.params.id
Si realmente no quieres tu ID en la ruta real, se vuelve un poco más molesto.
Pregunta: ¿Cómo puedo pasar un prop o un solo valor, como un _id, a través del componente Enlace de React-Router, y capturarlo 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>
El id que estoy intentando pasar es la propiedad de un objeto en el que está anidado el componente Link.
Encontré esta sintaxis params={} en otro hilo de StackOverflow. Mi código compilado sin romper, por lo que probablemente significa que funcionó? Sin embargo, no estoy seguro de cómo recuperar este valor pasado en el punto final.
Cualquier ayuda será apreciada.
Si desea enviar más de un parámetro a través de una ruta, puede hacerlo así.
Elemento 1.Link
<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
</Link>
2.Configure la ruta de su ruta para aceptar esos parámetros
<Route
exact
path="/exchangeClicked/:variable1,:variable2,:variable3"
component={MyComponent}
/>
3. 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>
Pasando props
Puede pasar props 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 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