reactjs - ¿Cómo pasar parámetros con history.push/Link/Redirect en react-router v4?

history.push react router 4

Question

¿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'');
});

Answer 1

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

Answer 2

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 superior withRouter . withRouter volverá a representar su componente cada vez que la ruta cambie con los mismos accesorios que <Route> render props: { match, location, history } .

Answer 3

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.

Answer 4

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

Answer 5

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:

1. en el componente history.push:

   this.props.history.push(/home:${this.state.userID})

2. en el componente del enrutador define la ruta:

   <Route path=''/home:myKey'' component={Home} />

3. en el componente de inicio:

   componentDidMount(){ const { myKey } = this.props.match.params console.log(myKey ) }