React Router 全部

路由库：https://reacttraining.com/react-router/

gitbub： https://github.com/ReactTraining/react-router

介绍

react-router 在我学习的时候遇到一个坑，当时不知版本查别这个么大，看着有些大牛的写法，自己很蒙，在这记录一下自己心得。

react Router安装

react router react-router-dom react-router-native 的关系

React Router是核心路由功能，但是您可能不想直接安装它。如果要编写将在浏览器中运行的应用程序，则应该安装react-router-dom。同样，如果您正在编写React Native应用程序，则应该安装install react-router-native。这两个都将react-router作为依赖项安装。

browserHistory，hashHistory

使用的是hashHistory, 遇到的问题就是链接地址会有 #

一般我使用browerHistory，可以看我另一篇文章了解更多二者区分用法

使用方法如下

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from '../views/index';
import Login from '../views/login';
class RouterHome extends Component {render() {return (<Router><Switch><Route path="/home/" component={Home} /><Route path="/" component={Login} /></Switch></Router>)}
}
export default RouterHome

Link

路由跳转

<Link to={{pathname: '/courses',search: '?sort=name',hash: '#the-hash',state: { fromDashboard: true }
}}/>

pathname:路径

search：参数

hash：放入网址的hash （可做页面定位使用）

state：状态持续到location(本人使用比较少，页面刷新后state为空);

当然也可以通过js来进行路由调转利用history.push('路径') 即可

Route

Route 组件也许是 React Router 中最重要的组件

最常用的的方法

import { BrowserRouter as Router, Route } from 'react-router-dom'<Router><Route exact path="/" component={Home}/><Route path="/news" component={NewsFeed}/>
</Router>

exact 默认true 路径完全匹配的意思

Switch

渲染与该地址匹配的第一个子节点 <Route> 或者 <Redirect>。

使用方法如下

<Switch><Route exact path="/" component={Home}/><Route path="/users" component={Users}/><Redirect from="/accounts" to="/users"/><Route component={NoMatch}/>
</Switch>