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

前言

　　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登陆、退出、以及切换不一样的页面；使用redux实现面包屑；引入使用其余经常使用的组件，好比highchart、富文本等，后续会继续完善。

　　github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）

　　项目展现地址：https://huangtao5921.github.io/react-admin/ 

 

1、安装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

 

2、配置路由

　　改写咱们的代码，这里改写的思路是：须要登陆才能看到的页面的路由配置，咱们所有放到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管理后台 -- 页面布局（五）