react路由

在React中，要想实现页面间的跳转，首先想到的就是使用路由，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。

两者的区别在于：
React-router：提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；
React-router-dom：提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件控制路由

在使用React的大多数情况下，我们会想要通过操作dom来控制路由，例如点击一个按钮完成跳转，这种时候使用React-router-dom就比较方便。
要使用React-router-dom，就要先进行安装：

npm install   react-router-dom --save 

在src目录下新建文件router.js
引入router

import {HashRouter, Route, Switch} from 'react-router-dom';

引入组件

import Index from './components/index/index';

定义路由

const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/Register" component={Register}/>
        </Switch>
    </HashRouter>
);
export default BasicRoute;

路由调用 <a href="#/Register">分类</a>
路由出口 <Router></Router>

路由跳转(Redirect)

引入 import { Redirect } from ‘react-router’;
在this.state里注册控制是否跳转的值loginSuccess

this.state={
            loginSuccess:false
        }

在方法中改变值loginSuccess

this.setState({
                loginSuccess:true
            })

在render(){}中根据值loginSuccess跳转不同页面

if(this.state.loginSuccess){
    return (<Redirect to="/" />);
}else{
    return (标签);
​
}

路由传参

url传参

在router.js中

<Route exact path="/Register/:id" component={Register}/>  //id为传递的参数

html

<a href="#/Register/33">注册</a>

在跳转页面通过this.props.match.params.id获取id值

隐式传参

跳转

this.props.history.push({
            pathname: '/',
            state: {
                id: 3
            }})

在跳转页面通过this.props.history.location.state.id获取id值

返回上一级页面 this.props.history.goBack();