React 集中配置式路由---React Router Config

最新推荐文章于 2022-11-22 09:16:33 发布

原创最新推荐文章于 2022-11-22 09:16:33 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #路由 #Router Config

React 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用React Router Config进行集中式的路由配置。内容包括npm包的安装、routers文件的创建、根路由的设置、在父路由下加载子路由的实现以及详细阐述了子路由的配置方法。

npm地址：

https://www.npmjs.com/package/react-router-config

安装：

npm install —S react-router-config react-router-dom

routers文件

import Layout from '../pages/layout/index'
import Child from '../pages/child/index'
import Err404 from '../pages/err404/index'
const routes = [
    {
        path: '/layout',
        component: Layout,
        name: 'layout',
        routes: [   //子路由
            {
                path: "/layout/child",
                component: Child
            }
        ]
    },
    {
        path: '*',
        component: Err404,
        name: "err404"
    }
]
export default routes

根路由文件

这里只会配置上routers文件的第一层，也就是说无法访问/layout/child

import React from 'react'
import { renderRoutes } from 'react-router-config'
import { HashRouter as Routers } from 'react-router-dom'
import routers from './router'
const RootRouters = () => {
    return (
        <Routers>
            {renderRoutes(routers)}
        </Routers>
    )
}
export default RootRouters

父路由下加载子路由

import React from 'react'
import routers from '../../router/router'
import { renderRoutes, matchRoutes } from 'react-router-config'
const Layout = (props) => {
    console.log(props);  
    //获取匹配router的compont
    console.log('matchRoutes', matchRoutes(routers, "/layout/child"));   
    return(
        <div>
            layout
            {
                {/* 渲染当前路由下的子路由所对应的组件，第二个参数是给子路由传入的额外自定义的参数 */}
                renderRoutes(props.route.routes，{ someProp: "these extra props are optional" })
            }
        </div>
    )
}
export default Layout

子路由

import React from 'react';
const Child = (props) => {
  console.log('props: ', props);
  return (
    <div>
      <h3>Grand Child</h3>
      {/* 拿到父路由组件传入的自定义属性 */}
      <div>{props.someProp}</div>
    </div>
  );
};
export default Child;