React之如何配置独立的路由文件

一般情况,一个项目路由不多的话,一个文件足以,但是要是有很多个路由,而且很多的子路由的话,一个路由文件就不好后期管理,那么我们可以分开引用,也就是我们所说的model
首先Router.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config';
//上面三个必不可少的,你可以对照一开始打建的项目路由引入作比较
//这个文件就是路由分离的文件
import {routes} from './routes'

/*
HashRouter
1.用这个了就代表路径加上/#/
2.换成BrowserRouter了；路径就不需要加/#/
3.用HashRouter了就要把path的路径名字带上，如果首次加载默认的话要这样写： <Route exact path="/"  component={App}/>

*/
const BasicRoute = () => (
    <BrowserRouter >
        {renderRoutes(routes)} 
    </BrowserRouter>
);
export default BasicRoute;

然后你分离的routes.js文件,也就是上面导入的

import App from '../App';
import TestRef from "../pages/test/TestRef"
import Home from '../component/project/home'
const routes = [
    {
        path: '/home',
        component:Home ,
        name:"home",
    {
       // path: '/testref',
       path: '/',//默认首加
        component:TestRef ,
        name:"TestRef"
    },
];
export {routes}

最后看一下最根文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

//导入组件的样式
import 'antd/dist/antd.css';
//导入路由文件
import Router from './router/Route';


const mountNode = document.getElementById('root');

ReactDOM.render( <Router/>, mountNode);

serviceWorker.unregister();

附:
其实不是很难,看一遍都会了,但是就是一开始尝试的时候不知道怎么下手,我也是百度后写出来的,不知道这样写合不合理,如果有问题的话希望指点一波,共同学习下,感谢