React 路由跳转及传参问题

一、路由的跳转

（一）DOM跳转

在需要跳转的页面导入import {Link} from 'react-router-dom'，在需要跳转的地方使用link标签的to属性进行跳转，路由配置文件中导出的那个类名相当于相当于router-view标签，在需要展示的地方引入这个类来展示。

1、在路由配置文件中配置路由

import Home from './containers/Home';
<Router>
  <Route path="/" exact component={Home}></Route>
</Router>

2、使用link标签进行跳转

import {Link} from 'react-router-dom'

<Link key={index} to={'/detail/' + item.get('id')}>
  ...
</Link>

（二）JS跳转

this.props.history.push(`/edit/${item.id}`)

二、路由的传参

（一）params传参

1、在路由配置中以/：的方式评接参数标识

import Detail from './pages/detail/loadable';
<Router>
  <Route path='/detail/:id' exact component={Detail}></Route>
</Router>

2、在路径后面将参数评接上(/参数)

this.props.history.push(`/edit/${item.id}`)

3、在被跳转页使用this.props.match.params.xxx(此处为id)    接收参数

componentDidMount() {
  const { id } = this.props.match.params
}

二、query传参

1、在router文件中配置为正常配置   

2、在跳转时  路径为一个对象{}     其中 pathname为路径,  query为一个对象  对象里是携带的参数

this.props.history.push({pathname: 'edit', query: { id: 1 }})

3、使用this.props.location.query接收参数

三、state传参

1.state 传参

<Link to={{pathname:'/detail', state: { id:item.get('id') }}}>
  ...
</Link>

2.如何接收数据呢？

this.props.location.state