Hay varias formas de pasar valores en el enrutamiento de reacción.

Hay tres formas de pasar valores en el enrutamiento de reacción: 1. método "props.params", que puede pasar uno o más valores, pero el tipo de cada valor es una cadena y no puede pasar un objeto; cual El método es similar al método get en el formulario. Los parámetros se pasan en texto sin cifrar, pero los parámetros se perderán al actualizar la página 3. Indique el método al obtener los parámetros, "this.props.match.params. nombre" debe usarse en este método, y los parámetros al actualizar la página también se perderán.

El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.

Hay varias formas de pasar valores en el enrutamiento de reacción.

Hay tres formas de pasar valores en rutas:

1.props.params (recomendado)

//Establecer enrutamiento <Router History={hashHistory}> <Route path='/user/:name' componente={UserPage}></Route> </Router>importar { Router,Route,Link,hashHistory} desde 'react -router';clase La aplicación extiende React.Component { render() { return ( <Link to="/user/sam">user</Link> // o hashHistory.push("/user/sam"); ​​​​) } }

Cuando la página salta a la página UserPage, extraiga el valor pasado:

exportar la clase predeterminada UserPage extiende React.Component{ constructor(props){ super(props } render(){ return(<div>this.props.match.params.name</div>) }}

El método anterior puede pasar uno o más valores, pero el tipo de cada valor es una cadena y no se puede pasar un objeto. Si se pasa, el objeto json se puede convertir en una cadena y luego pasarlo. , el json convierte una cadena en un objeto y extrae datos

//Definir ruta <Ruta de ruta='/user/:data' componente={UserPage}></Route>//Establecer parámetros var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Pasar valor <Link to={path}>user</Link>//o hashHistory.push(path);//Obtener parámetro var datos = JSON.parse(this.props.params.data);var {id,nombre,edad} = datos;

2.consulta (no recomendado: los parámetros de la página de actualización se pierden)

El método de consulta es muy simple de usar, similar al método get en el formulario, y los parámetros se pasan en texto sin formato.

//Definir ruta <Ruta de ruta='/usuario' componente={UserPage}></Ruta>//Establecer parámetros var data = {id:3,name:sam,age:36};var ruta = { nombre de ruta:' /usuario', consulta:datos,}//Pasar valor <Link to={path}>usuario</Link>//o hashHistory.push(path);//Obtener parámetro var data = this.props.location.query ;var {id,nombre,edad} = datos;

3.estado (no recomendado, los parámetros de la página de actualización se pierden)

El modo de estado es similar al modo de publicación y su uso es similar al de consulta.

//Establecer ruta <Route path='/user' componente={UserPage}></Route>//Establecer parámetros var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Pasar valor <Link to={path}>user</Link>//o hashHistory.push(path);//Obtener parámetro var data = this.props.location.state ;var {id,nombre,edad} = datos;

Consejos especiales:

1. Utilice this.props.match.params.name cuando obtenga parámetros.

2. Si imprime en un subcomponente, recuerde pasar this.props, de la siguiente manera:

clase Todolist extiende Componente { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //Si no, pasa esto .props es un objeto vacío </section> </div> </DocumentTitle> ); exportar Todolist predeterminado;