首先在app.js中引用BrowserRouter和Routes
hashHistory：hashHistory 使用 URL 中的 hash（#）部分去创建路由，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。
browserHistory：browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL 。
render(){
return (
<BrowserRouter>
<div className="App">
<Routes />
</div>
</BrowserRouter>
);
}
Routes 是引用的组件里面包含各种路由信息
Routes 代码：
import { Route} from "react-router-dom";
import Home from "../views/Home";
import Login from "../views/login";
// 前置路由守卫Auto
import Auto from "./auto";
const Routes=()=>{
return (
<div>
<Route path="/login" component={Login}></Route>
<Auto exact path="/" component={Home}/>
</div>
)
}
export default Routes;
exact是Route的一个属性，认为其是一种严格匹配模式
Route 表示匹配当前路由路径以及引用当前组件
其中Auto是当前的路由中间键，用来做路由前置首位作用
Auto代码：
import React,{Component} from 'react';
import {Route,Redirect } from 'react-router-dom';
class Auto extends Component{
render(){
// 获取token
const token=localStorage.getItem('token');
// 进行判断如果有token则进入当前主页否则跳转至登录页面
if(token){
return(
// <Route component={Home}></Route>
<Route component={this.props.component}></Route>
// 接受父组件传过来的component组件值
)
}else{
return(
<Redirect to='/login' />
// 使用Redirect做重定向，跳转到我们定义的组件当中
)
}
}
}
export default Auto;
接下来就是登录之后主页的代码了，因为登录之后主页会有一个共有界面，一般是由菜单导航组成，而右下角的部分出才是主要内容所以就要定义一个共有界面
import React from 'react';
import Rainbox from '../hoc/Rainbox';
import { Route,Switch} from "react-router-dom";
import Contact from "../views/Contact";
import About from "../views/About";
const Home=()=>{
return (
<div className="home">
<h1>这是主页</h1>
{/* 这是共有信息 */}
<Switch>
{/* switch只显示匹配到的第一个路由 */}
<Route exact path="/" component={About}></Route>
{/* 默认走向关于我们页面 */}
<Route path="/home/contact" component={Contact}></Route>
</Switch>
</div>
)
}
export default Rainbox(Home);
// Rainbox这是定义的一个高阶组件用来切换该页面的主要色调
