⑤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;

 以上实现了路由模块化分离