react + react-router + redux + ant-Desgin 搭建react管理后台 -- 路由搭建（四）

前言

　　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用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即可。


$ yarn add react-router-dom --save-dev

　　安装成功后，我们改写一下每个页面的代码，并将组件导出，比如：首页的home.js改成如下，其他页面类似

import React from 'react';
class Home extends React.Component {
  render() {
    return (
      <div>首页</div>
    );
  }
}

export default Home

二、配置路由

　　改写我们的代码，这里改写的思路是：需要登录才能看到的页面的路由配置，我们全部放到routes/index.js中，我取名叫做Main，登录页以及Main的路由我们放在App.js中。index.js

中需要引入 BrowserRouter。具体改写如下：

　　routes/index.js如下，写好之后在根目录下的App.js引入

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from '../pages/home/Home';
import Connect from '../pages/user/connect/Connect';
import List from '../pages/user/list/List';
import Rich from '../pages/tool/rich/Rich';
import NotFind from '../pages/notFind/NotFind';

class Index extends React.Component{
  render() {
    return (
      <Switch>
        <Route exact path="/" component={ Home }/>
        <Route path="/user/connect" component={ Connect }/>
        <Route path="/user/list" component={ List }/>
        <Route path="/tool/rich" component={ Rich }/>
        <Route component={ NotFind }/>
      </Switch>
    );
  }
}

export default Index;

　　根目录下的App.js如下，写好之后，在根目录的index.js中引入

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import './app.css';
import Login from './pages/login/Login';
import Main from './routes/Main';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route path="/login" component={ Login } />
          <Route path="/" component={ Main }/>
          <Redirect to="/"/>
        </Switch>
      </div>
    );
  }
}

export default App;

　　根目录下的index.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
  , document.getElementById('root'));

　　当上面的路由都处理好之后，运行我们的项目，此时在3000端口打开，http://localhost:3000/，路由命中了我们的首页，页面展示的就是“首页”2个字。我们再尝试在浏览器中输入其他的一些路由，看看是否都成功，如果跟我下面的图展示的是一样的话，说明路由配置已经成功了，现在项目能根据不同的url访问到我们不同的页面了。

　　比如：http://localhost:3000/login访问的是登录页

     

　　http://localhost:3000/user/list访问的是用户列表页，其他的页面同理

 

　　注：交流问题的可以加QQ群：531947619

　　　　

 下一篇：react + react-router + redux + ant-Desgin 搭建react管理后台 -- 页面布局（五）