Passagem de parâmetro de rota do React

Índice

1. Parâmetros de roteamento

1. Passagem de parâmetro de roteamento dinâmico

2. parâmetros de consulta 

3. passagem de parâmetro de estado 

2. Interceptação de rota 

3. Modo de roteamento

4. com roteador 

---

1. Parâmetros de roteamento

1. Passagem de parâmetro de roteamento dinâmico

使用prop进行接收 props.match.params.参数名

2. parâmetros de consulta 

this.props.history.push({
pathname: ‘路由’,
query:{参数名：参数值}
})
 
接收:
this.props.location.query.参数名

3. passagem de parâmetro de estado 

this.props.history.push({
pathname: ‘路由’,
state:{参数名：参数值}
})
 
接收:
this.props.location.state.参数名

2. Interceptação de rota 

Normalmente nós criamos rotas são 

<Route path="" component={组件}></Route>

Também podemos escrever 

<Route path="" render={(props) => {
  在这里我们可以进行路由拦截，处理一些东西，判断要显示那个组件
  由于我们在函数中组件已经实例化，我们在其他组件中通过props进行路由跳转会发生报错，拿不到props，所以我们需要在render函数中将
  props传入，将props传入组件中,例如：<Clird {...props}/>,这样就可以通过props进行跳转
}}></Route>

 3. Modo de roteamento

HashRouter é um modo hash, com #, se você não quiser usar #, podemos mudar HashRouter para BrowserRouter 

4. com roteador 

Quando props não podem ser obtidos em subcomponentes, geralmente usamos o método withRouter() para agrupar e atribuir o valor de retorno a uma nova variável. Essa variável é o novo componente que agrupamos. Substitua este componente pelo componente original. 

const 新组件名 = withRouter(组件名)