⑤react-router4.x 路由模塊化

按照之前的寫法，我們都是將Route手動填寫進去，如果路由變得多，嵌套變得複雜，就會看上去很亂

之前的做法：

class App extends Component {
  render() {
    return (
        <Router>
          <div>           
              <header className="title">
                <Link to="/">首頁</Link>
                <Link to="/news">新聞</Link>
                <Link to="/product">商品</Link>
              </header>
 
      
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} />                 
          </div>
      </Router>
    );
  }
}

1、路由代碼分離

現在我們 可以考慮把路由配置抽離出來，類似以下這樣：

let routes = [
  {
    path: "/",
    component: Home,
    exact:true
  },
  {
    path: "/shop",
    component: Shop
  },
  {
    path: "/user",
    component: User
  },
  {
    path: "/news",
    component: News
  }
];



class App extends Component {

  render() {
    return (
      <Router>
        <div>
            <header className="title">
              <Link to="/">首頁組件</Link>
              <Link to="/user">用戶頁面</Link>
              <Link to="/shop">商戶</Link>
              <Link to="/news">新聞</Link>
            </header> 
            {
              routes.map((route,key)=>{
                if(route.exact){
                  return <Route key={key} exact path={route.path} component={route.component}/>
                }else{
                  return <Route  key={key}  path={route.path} component={route.component}/>
                }
              })
            }
        </div>
      </Router>
    );
  }
}

export default App;

將路由配置放在一個routes數組裏面，通過循環routes，來實現原有相同的功能，後續如果需要增加配置，直接在routes裏面增加一項， 看上去有點類似vue的路由配置

2、路由代碼模塊化分離

完善：

我們可以吧配置單獨抽離出去，然後在入口文件裏面引入，實現模塊化分離

新建一個router.js

import Home from '../components/Home';
import User from '../components/User';
import Shop from '../components/Shop';
import News from '../components/News';


let routes = [
    {
      path: "/",
      component: Home,
      exact:true
    },
    {
      path: "/shop",
      component: Shop
    },
    {
      path: "/user",
      component: User
    },
    {
      path: "/news",
      component: News
    }
];

export default routes;

App.jsx

import routes from './router.js';

class App extends Component {

  render() {
    return (
      <Router>
        <div>
            <header className="title">
              <Link to="/">首頁組件</Link>
              <Link to="/user">用戶頁面</Link>
              <Link to="/shop">商戶</Link>
              <Link to="/news">新聞</Link>
            </header> 
            {
              routes.map((route,key)=>{
                if(route.exact){
                  return <Route key={key} exact path={route.path} component={route.component}/>
                }else{
                  return <Route  key={key}  path={route.path} component={route.component}/>
                }
              })
            }
        </div>
      </Router>
    );
  }
}

export default App;

3、嵌套路由實現模塊劃分離

直接上代碼吧

router.js

import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';


let routes = [
    {
      path: "/",
      component: Home,
      exact:true
    },
    {
      path: "/shop",
      component: Shop
    },
    {
      path: "/user",
      component: User,  
      routes:[   /*嵌套路由*/
        {
          path: "/user/",
          component: UserList
        },
        {
          path: "/user/add",
          component: UserAdd
        },
        {
          path: "/user/edit",
          component: UserEdit
        }
      ]
    },
    {
      path: "/news",
      component: News
    }
];

export default routes;

在需要子路由的裏面加入一個routes數組

入口app.jsx：

<Router>
  <div>
    <header className="title">
        <Link to="/">首頁組件</Link>
        <Link to="/user">用戶頁面</Link>
        <Link to="/shop">商戶</Link>
        <Link to="/news">新聞</Link>
    </header> 
    {
      routes.map((route,key)=>{
          if(route.exact){
            return <Route key={key} exact path={route.path}
              render={props => (
                <route.component {...props} routes={route.routes} />
              )}
            />
          }else{
            return <Route  key={key}  path={route.path} 
              render={props => (
                <route.component {...props} routes={route.routes} />
              )}
            />

          }
      })
    }    
  </div>
</Router>

以上爲什麼這麼去書寫，我不做過多的解釋，我怕我會解釋的很糟糕，還是提供官方文檔地址查看吧 嵌套路由分離

以上實現了之後，在嵌套路由組件可以通過this.props.routes 將傳遞進來的子組件打印出來，然後循環子組件，進而實現子組件路由嵌套

code：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class User extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一個User組件'
         };
    }
    componentWillMount(){
        console.log(this.props.routes);
    }
    render() {
        return (
            <div className="user">
               <div className="content">
                    <div className="left">
                        <Link to="/user/">用戶列表</Link>
                        <Link to="/user/add">增加用戶</Link>
                        <Link to="/user/edit">編輯用戶</Link>
                    </div>
                    <div className="right">
                            {
                                this.props.routes.map((route,key)=>{
                                     return   <Route key={key} exact path={route.path} component={route.component} />
                                })
                            }
                            {/* <Route  path="/user/add" component={UserAdd} /> */}
                    </div>
                </div>
            </div>
        );
    }
}

export default User;

 以上實現了路由模塊化分離