前言
**** 学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。
github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）
**项目展示地址：https://huangtao5921.github.io/react-admin/ **
** **
一、安装react-router-dom
上一篇文章中 react + react-router + redux + ant-Desgin 搭建react管理后台 — 引入ant-Desgin并测试（三）我们已经将文件添加并成功引入了ant-Design。
接下来我们要开始将项目的路由搭建出来，这里我们使用的是React-router V4。
首先，执行如下命令安装
** react-router-dom**，主要用到
react-router-dom 中的 **Route, Switch, Redirect。**这里会涉及到 react-router 与 react-router-dom的区别，其实react-router实现了路由的核心功能，而react-router-dom基于react-router，且添加了一些DOM类的组件，比如<Link>、<BrowserRouter>、<Switch>等，我们只需要引入react-router-dom即可。
2
3
2
3
安装成功后，我们改写一下每个页面的代码，并将组件导出，比如：首页的home.js改成如下，其他页面类似
2
3
4
5
6
7
8
9
10
11
12
2class Home extends React.Component {
3 render() {
4 return (
5 <div>首页</div>
6 );
7 }
8}
9
10export default Home
11
12
二、配置路由
改写我们的代码，这里改写的思路是：需要登录才能看到的页面的路由配置，我们全部放到routes/index.js中，我取名叫做Main，登录页以及Main的路由我们放在App.js中。index.js
中需要引入** BrowserRouter。**具体改写如下：
routes/index.js如下，写好之后在根目录下的App.js引入
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2import { Route, Switch } from 'react-router-dom';
3import Home from '../pages/home/Home';
4import Connect from '../pages/user/connect/Connect';
5import List from '../pages/user/list/List';
6import Rich from '../pages/tool/rich/Rich';
7import NotFind from '../pages/notFind/NotFind';
8
9class Index extends React.Component{
10 render() {
11 return (
12 <Switch>
13 <Route exact path="/" component={ Home }/>
14 <Route path="/user/connect" component={ Connect }/>
15 <Route path="/user/list" component={ List }/>
16 <Route path="/tool/rich" component={ Rich }/>
17 <Route component={ NotFind }/>
18 </Switch>
19 );
20 }
21}
22
23export default Index;
24
25
根目录下的App.js如下，写好之后，在根目录的index.js中引入
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2import { Route, Switch, Redirect } from 'react-router-dom';
3import './app.css';
4import Login from './pages/login/Login';
5import Main from './routes/Main';
6
7class App extends React.Component {
8 render() {
9 return (
10 <div className="App">
11 <Switch>
12 <Route path="/login" component={ Login } />
13 <Route path="/" component={ Main }/>
14 <Redirect to="/"/>
15 </Switch>
16 </div>
17 );
18 }
19}
20
21export default App;
22
根目录下的index.js如下：
2
3
4
5
6
7
8
9
10
11
2import ReactDOM from 'react-dom';
3import App from './App';
4import { BrowserRouter } from 'react-router-dom';
5
6ReactDOM.render(
7 <BrowserRouter>
8 <App/>
9 </BrowserRouter>
10 , document.getElementById('root'));
11
当上面的路由都处理好之后，运行我们的项目，此时在3000端口打开，http://localhost:3000/，路由命中了我们的首页，页面展示的就是“首页”2个字。我们再尝试在浏览器中输入其他的一些路由，看看是否都成功，如果跟我下面的图展示的是一样的话，说明路由配置已经成功了，现在项目能根据不同的url访问到我们不同的页面了。
比如：http://localhost:3000/login访问的是登录页
