浅析react-router-config的使用

12,288 阅读2分钟

react-router-config用于静态路由配置,属于react-router的一个插件,主要用于集中管理路由配置

编写一个简单示例

先安装react-router-domreact-router-config

yarn add react-router-dom react-router-config

创建router文件夹,创建index.js文件,编写以下代码

const Home = () => {
  return <div>这是home</div>;
};

const Group = () => {
  return <div>这是Group</div>;
};

const About = () => {
  return <div>这是about</div>;
};

//编写基本的路由路线,path为路径,component为对应渲染的组件,exact属性决定是否精准匹配
const routes = [
  {
    path: "/",
    component: Home,
    exact: true,
  },
  {
    path: "/group",
    component: Group,
  },
  {
    path: "/about",
    component: About,
  },
];

//将路由表数组导出
export default routes;

接着在App组件中引入导出的路由表,从react-router-config中解构renderRoutes函数,通过renderRoutes函数渲染出路由表的对应组件

import { NavLink, HashRouter as Router } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "./router";

function App() {
  return (
    <div style={{ textAlign: "center" }}>
      <Router>
        <NavLink exact activeStyle={{color:'red'}} to="/">home</NavLink> |
        <NavLink activeStyle={{color:'red'}} to="/group">group</NavLink> |
        <NavLink activeStyle={{color:'red'}} to="/about">about</NavLink>
        {renderRoutes(routes)}
      </Router>
    </div>
  );
}

export default App;

使用react-router-config最基本的路由切换效果就完成了

嵌套路由

正常的业务必定有前套路由的使用,先在路由表中添加routes属性,值为RouteConfig[]

//在router的index.js文件中添加嵌套路由对应的组件
const GroupDetail = () => {
  return <div>这是GroupDetail</div>;
};

//
const routes = [
  {
    path: "/",
    component: Home,
    exact: true,
  },
  {
    path: "/group",
    component: Group,
    routes: [ //此处添加嵌套路由
      {
        path: "/group/detail",
        component: GroupDetail,
      },
    ],
  },
  {
    path: "/about",
    component: About,
  },
];

再将导航的路径改为嵌套路由的路径

<NavLink activeStyle={{color:'red'}} to="/group/detail">group</NavLink>

刷新页面后点击group查看效果,会发现地址改变成/group/detail,但子组件内容却没有渲染 renderRoutes函数具体做了什么,可以看下源码实现
通过阅读源码,我们可以看到renderRoutes的逻辑实际上是接收路由表routes后,判断并初始化extraPropsswitchProps,接着渲染了Switch组件,switchProps作为Switch组件的props传入,Switch组件的子元素通过将routes遍历得到。遍历的逻辑是渲染Route组件,将一系列的属性赋值给Route组件的propsrender函数则将渲染具体的组件(_extends函数作用是合并对象,对象中包含extraPropsprops及路由对象自身),阅读完后便可以理解为何没有渲染嵌套路由的组件了,源码没有处理嵌套路由,所以renderRoutes函数只会输出路由表的第一层。

既然知道了处理逻辑,那么渲染嵌套路由的组件也很容易了

因为每个组件都接收了匹配自身的路由对象,只需要从props中取出route中的routes,通过renderRoutes再次渲染即可,可以打印下props确认下具体对象的键值对

import { renderRoutes } from "react-router-config";

const Group = (props) => {
  console.log(props)
  return (
    <div>
      这是Group
      {renderRoutes(props.route.routes)}
    </div>
  );
};



这时候再看看页面中的表现,嵌套路由对应的组件就渲染成功了