Existem várias maneiras de passar valores no roteamento de reação

Existem três maneiras de passar valores no roteamento de reação: 1. método "props.params", que pode passar um ou mais valores, mas o tipo de cada valor é uma string e não pode passar um objeto 2. método de consulta, which O método é semelhante ao método get no formulário Os parâmetros são passados ​​​​em texto simples, mas os parâmetros serão perdidos ao atualizar a página 3. Método de estado Ao obter parâmetros, "this.props.match.params. name" deve ser usado neste método, e os parâmetros ao atualizar a página também serão perdidos. serão perdidos.

O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.

Existem várias maneiras de passar valores no roteamento de reação

Existem três maneiras de passar valores em rotas:

1.props.params (recomendado)

//Definir roteamento <Router history={hashHistory}> <Route path='/user/:name' component={UserPage}></Route> </Router>importar { Router,Route,Link,hashHistory} de 'react -router';class App estende React.Component { render() { return ( <Link to="/user/sam">user</Link> // ou hashHistory.push("/user/sam"); ​​​​) } }

Quando a página pular para a página UserPage, retire o valor passado:

exportar classe padrão UserPage estende React.Component{ construtor(props){ super(props } render(){ return(<div>this.props.match.params.name</div>) }}

O método acima pode passar um ou mais valores, mas o tipo de cada valor é uma string e um objeto não pode ser passado. Se for passado, o objeto JSON pode ser convertido em uma string e depois passado. , o json converte string em objeto e retira dados

//Definir rota <Route path='/user/:data' component={UserPage}></Route>//Definir parâmetros var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Passe valor <Link to={path}>user</Link>//ou hashHistory.push(path);//Obter parâmetro var dados = JSON.parse(this.props.params.data);var {id,nome,idade} = dados;

2.query (não recomendado: os parâmetros de atualização da página são perdidos)

O método de consulta é muito simples de usar, semelhante ao método get no formulário, e os parâmetros são passados ​​em texto simples.

//Definir rota <Route path='/user' component={UserPage}></Route>//Definir parâmetros var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//Passe o valor <Link to={path}>user</Link>//ou hashHistory.push(path);//Obtenha o parâmetro var data = this.props.location.query ;var {id,nome,idade} = dados;

3.state (não recomendado, os parâmetros de atualização da página são perdidos)

O modo de estado é semelhante ao modo post e seu uso é semelhante ao de consulta.

//Definir roteamento <Route path='/user' component={UserPage}></Route>//Definir parâmetros var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Passe o valor <Link to={path}>user</Link>//ou hashHistory.push(path);//Obtenha o parâmetro var data = this.props.location.state ;var {id,nome,idade} = dados;

Dicas especiais:

1. Use this.props.match.params.name ao obter parâmetros.

2. Se estiver imprimindo em um subcomponente, lembre-se de passar this.props, da seguinte forma:

class Todolist estende Componente { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //Se não passar isto .props é um objeto vazio </section> </div> </DocumentTitle> ); } }export default Todolist;