React中的路由

可以使用路由用来匹配不同的模块来响应用户的请求，有些公司的项目代码中依旧使用的是老版的路由，所以说先说3.0版本再说4.0版本，最新的5.0版本和4.0版本差别并不大。

路由Router3.X的安装和使用。

命令行：

npm install --save react-router@3.x

引入路由和书写：

hashHistory是用来保存历史的，可以在页面顶端前进后退

import { Router,Route,hashHistory } from "react-router";

<Router history={ hashHistory }>

<Route path="/home" component={ Home }></Route>

<Route path="/mine" component={ Mine }></Route>

</Router>

路由的跳转和连接（显示在页面的导航（Link也相当于一个a标签））：

import { Link } from "react-router"

<ul>

<li>

<Link to="/home">主页面</Link>

</li>

<li>

<Link to="/mine">我的</Link>

</li>

</ul>

在对应的路由里嵌套结构

<Route path="/mine" component={ Mine }>

<Route path="/mine/demo" component={ Demo }></Route>

<Route path="/mine/center" component={ Center }></Route>

</Route>

如果想要显示子级路由需要写：

{ this.props.children }

多页面跳转单一页面携带参数

1.主页面创建key

<Route path="/detail/:goodsId" component={ Detail }></Route>

2.传递参数值

<Link to="/detail/1001">内容1</Link>

动态参数拼接：
<Link to={`/detail/${element.id}`}>{ element.name }</Link>

3.单一页面组件读取参数

{ this.props.params.goodsId }

路由Router4.X的安装和使用。

安装命令行：

npm install --save react-router react-router-dom

引入的内容和3.x有点区别：

import { Route,BrowserRouter,Switch } from "react-router-dom"

<BrowserRouter>

<Switch>

{ exact:精准匹配 “/”代表根目录（首页） “”如果报错会调用该页面，必须写在最后}

<Route exact path="/" component={ Home }></Route>

<Route path="/other" component={ Other }></Route>

<Route path="*" component={ NotFound }></Route>

</Switch>

</BrowserRouter>

BrowserHistory和HashHistory的区别（网址上显示的不同)

HashHistory：#/

BrowserHistory：/

路由嵌套：

import Other from "../Other"；

使用引入的父级路由标签包裹：

<Other path="/other">

<Switch>

<Route path="/other/java" component={ Java }></Route>

<Route path="/other/web" component={ Web }></Route>

</Switch>

</Other>

单一页面组件读取参数（与3.x不同的是多了一个 match）：

{this.props.match.params.id}

路由高亮（将Link标签替换为NavLink）

原标签<Link to="/home">首页</Link>

<NavLink to="/home">首页</NavLink>

重定向（当用户点击进入主页面时，只需要进入（http://localhost:3000/）就会自动跳转到（http://localhost:3000/home）(home为主页面)）

render={() => (<Redirect to="/home" />)}

使用：

<Route exact path="/" render={() => (<Redirect to="/home" />)}></Route>

 

如果您看到有地方写的不对，请指出，必定虚心接受，谢谢。