reactjs - ¿Cómo pasar parámetros con history.push/Link/Redirect en react-router v4?
history.push react router 4 (5)
¿Cómo podemos pasar el parámetro con
this.props.history.push(''/page'')
en React-Router v4?
.then(response => {
var r = this;
if (response.status >= 200 && response.status < 300) {
r.props.history.push(''/template'');
});
Agregue información para obtener parámetros de consulta.
const queryParams = new URLSearchParams(this.props.location.search);
console.log(''assuming query param is id'', queryParams.get(''id'');
Para obtener más información sobre URLSearchParams, consulte este enlace URLSearchParams
En primer lugar, no necesita hacer
var r = this;
como esto en la
if statement
refiere al contexto de la devolución de llamada en sí, que ya que está utilizando la función de flecha se refiere al contexto del componente React.
Según los documentos:
Los objetos de historial suelen tener las siguientes propiedades y métodos:
- longitud - (número) El número de entradas en la pila de historial
- action - (string) La acción actual (PUSH, REPLACE o POP)
ubicación - (objeto) La ubicación actual. Puede tener las siguientes propiedades:
- ruta - (cadena) La ruta de la URL
- buscar - (cadena) La cadena de consulta de URL
- hash - (cadena) El fragmento de hash de URL
- estado: (cadena) estado específico de la ubicación que se proporcionó, por ejemplo, a push (ruta, estado) cuando esta ubicación se introdujo en la pila. Solo disponible en el navegador y el historial de memoria.
- push (ruta, [estado]) - (función) Inserta una nueva entrada en la pila de historial
- replace (ruta, [estado]) - (función) Reemplaza la entrada actual en la pila de historial
- go (n) - (función) Mueve el puntero en la pila del historial por n entradas
- goBack () - (función) Equivalente a ir (-1)
- goForward () - (función) Equivalente a ir (1)
- bloque (indicador) - (función) Impide la navegación
Entonces, mientras navegas, puedes pasar accesorios al objeto de historia como
this.props.history.push({
pathname: ''/template'',
search: ''?query=abc'',
state: { detail: response.data }
})
o de manera similar para el componente
Link
o el componente
Redirect
<Link to={{
pathname: ''/template'',
search: ''?query=abc'',
state: { detail: response.data }
}}> My Link </Link>
y luego en el componente que se procesa con
/template
route, puede acceder a los accesorios pasados como
this.props.location.state.detail
También tenga en cuenta que, al usar el historial o los objetos de ubicación de accesorios, debe conectar el componente con
withRouter
.
Según los documentos:
withRouter
Puede obtener acceso a las propiedades del objeto de historial y a la coincidencia más cercana de
<Route>''s
través del componente de orden superiorwithRouter
.withRouter
volverá a representar su componente cada vez que la ruta cambie con los mismos accesorios que<Route>
renderprops: { match, location, history }
.
No es necesario usar con Router. Esto funciona para mi:
En tu página principal,
<BrowserRouter>
<Switch>
<Route path="/routeA" render={(props)=> (
<ComponentA {...props} propDummy={50} />
)} />
<Route path="/routeB" render={(props)=> (
<ComponentB {...props} propWhatever={100} />
)} />
</Switch>
</BrowserRouter>
Luego, en ComponentA o ComponentB puede acceder
this.props.history
objeto, incluido el método this.props.history.push.
puedes usar,
this.props.history.push("/template", { ...response })
o
this.props.history.push("/template", { response: response })
entonces puede acceder a los datos analizados desde
/template
componente de
/template
siguiendo el código,
const state = this.props.location.state
Aquí está el enlace para la documentación de la API
Si necesita pasar parámetros de URL
hay una gran explicación de la publicación de Tyler McGinnis en su sitio, Enlace a la publicación
Aquí hay ejemplos de código:
-
en el componente history.push:
this.props.history.push(/home:${this.state.userID})
-
en el componente del enrutador define la ruta:
<Route path=''/home:myKey'' component={Home} />
-
en el componente de inicio:
componentDidMount(){ const { myKey } = this.props.match.params console.log(myKey ) }