[JavaScript知识库]react router集中式路由

import { routesArray } from './routerArray'
import {renderRoutes, matchRoutes} from 'react-router-config';
import {HashRouter} from 'react-router-dom';

function App() {
  return(<HashRouter>
    {renderRoutes(routesArray)}
  </HashRouter>);
}

export default App;

import FirstLayout from '../page/FirstLayout'
import SecondLayout from '../page/SecondLayout'
import ThirdLayout from '../page/ThirdLayout'
const routesArray = [
    {
        path : "/",
        component : FirstLayout,
        routes : [
            {
                path : "/secondLayout",
                component : SecondLayout,
                routes : [
                    {
                        path : "/secondLayout/ThirdLayout",
                        component : ThirdLayout,
                    }
                ]
            }
        ]
    }
]
export default routesArray ;

import {renderRoutes, matchRoutes} from 'react-router-config';
import {Link} from 'react-router-dom';
let FirstLayout = (props)=>{
    return(<div>
        <Link to="/secondLayout"></Link>
        {renderRoutes(props.route.routes)}
    </div>);
}

import {renderRoutes, matchRoutes} from 'react-router-config';
import {Link} from 'react-router-dom';
let SecondLayout = (props)=>{
    return(<div>
        <Link to="/secondLayout/ThirdLayout"></Link>
        {renderRoutes(props.route.routes)}
    </div>);
}

import {renderRoutes, matchRoutes} from 'react-router-config';
let ThirdLayout = (props)=>{
    return(<div>
        thirdLayout
    </div>);
}