React-router-dom路由的封装及使用模拟vue路由

react-router-dom是没有帮我们把路由封装成像vue-router一样只用一个配置文件配置就可以配置路由的。像我们这么懒的人，肯定不愿意加一个页面要多加那么多代码，用配置的多好，省事。

1.配置文件 /router.js

import Home from '../../components/Home';
import ProductDetail from '../../components/ProductDetail';
import User from '../../components/User';
import Main from '../../components/User/Main';
import Info from '../../components/User/Info';

let router = [
    {
        path: '/',//首页默认加载的页面
        componentName: Home,
        exact: true //是否为严格模式
    },
    {
        path: '/productdetail/:id',//后面是传递的参数id
        componentName: ProductDetail
    },
    {
        path: '/user',
        componentName: User,
        routes: [  /** 嵌套路由  User下面又有两个子页面*/
            {
                path: '/user/',
                componentName: Main,
                exact: false
            },
            {
                path: '/user/info',
                componentName: Info
            },
        ]
    }
];

export default router;

2.在App.js入口文件引入router.js

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

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          {
            router.map(({path, componentName, exact = true, routes = []}, key) => {
                return <Route
                          exact={exact}
                          key={key}
                          path={path}
                          render={props => (
                            //主要是为了传递嵌套路由到子组件
                            //类似于 <User {...props} routes={routes} />
                            <componentName {...props} routes={routes} />
                          )}
                        />
            })
          }
        </div>
      </Router>
    );
  }
}
export default App;

3.在User.js文件根据routers获取嵌套路由

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

class User extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {match, routes} = this.props;
        return (
            <div>
                <div className="content">
                    <div className="left">
                   
                        <Link to={`${match.url}`}>个人中心</Link>
                        <br/>
                        <Link to={`${match.url}/info`}>用户信息</Link>
                    </div>
                    <div className="right">
                    {
                       routes.map(({path, componentName, exact = true},key) => {
                            return <Route
                                        exact={exact}
                                        key={key}
                                        path={path}
                                        component={componentName}
                                        />
                        })
                    }
                       
                    </div>
               
                </div>
               
            </div>
        );
    }
}

export default User;

之后每增加一个页面就在router.js配置文件里按照规则配置一个路由就可以了，是不是终于和vue-router差不多了，用来顺手了。