react中多个路由的配置

首先使用react路由，肯定要先安装
安装命令为：

npm install react-router-dom -S  

我们平常都是直接创建一个reactRouter.js文件，直接在里面写上如下代码

import React from "react";
import Home from "./component/Home";
import New from "./component/New";
import About from "./component/About";//引入路由文件
import { BrowserRouter, HashRouter, Route, Link} from "react-router-dom";
class reactRouter extends React.Component {
  render() {
    return (
    //根容器  HashRouter写在根容器中，只写一次就ok
      <HashRouter>
        <div>
          <h1>这是根目录</h1>
          <hr />
          <Link to="/home">邓紫棋偶像</Link>&nbsp;&nbsp;
          <Link to="/new">熊梓淇男神</Link>&nbsp;&nbsp;
          <Link to="/about">袁姗姗女神</Link>//在Link内置组件中，配置to属性，进行跳转：
        </div>
        //引入路由文件 进行跳转
        <Route path="/home" component={Home}></Route>//在Route内置组件中，配置path规则：
        <hr />
        <Route path="/new"  component={New}></Route>
        <hr />
        <Route path="/about" component={About}></Route>
      </HashRouter>
    );
  }
}
export default reactRouter;//向外暴露

这种写法一般只适用于初学者，而且需要跳转的页面比较多的话，这样也不方便管理。
现在写写配置多个路由的代码，欢迎大家提出自己不同的想法，去更好的改进
1.首先创建一个router文件夹，在里面创建Config.js和Router.js 两个人文件
Config.js中导入代码：

import React from 'react';
let config = [   {
  name: 'xxxxxx',
  path: '/xxxxxx',
  exact: true,
  component:  () => import('../pages/Gem')
},  {
  name: 'xxxxxx',
  path: '/xxxxxx',
  exact: true,
  component:  () => import('../pages/Travel')
},
...
]
export default config

Router.js导入代码：

import React, { Component } from 'react'
import Config from './Config'
import NotFound from '../pages/404'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
export default class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          {/* 导入相关路由配置 */}
          {
            Config.map((item, index) =>   {return <Route exact={item.exact} key={index} path={item.path} component={item.component} />})
          }
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    )
  }
}

注：React Router 里的路径匹配以及组件加载都是异步完成的，不仅允许你延迟加载组件，并且可以延迟加载路由配置。在首次加载包中你只需要有一个路径定义，路由会自动解析剩下的路径。
这样方便配置多个路由，并且也是开发项目中最常用的路由配置，若有不同看法，欢迎指出恩