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管理後臺 -- 頁面佈局（五）