react-router-config用于静态路由配置,属于react-router的一个插件,主要用于集中管理路由配置
编写一个简单示例
先安装react-router-dom
和react-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
后,判断并初始化extraProps
和switchProps
,接着渲染了Switch
组件,switchProps
作为Switch
组件的props
传入,Switch
组件的子元素通过将routes
遍历得到。遍历的逻辑是渲染Route
组件,将一系列的属性赋值给Route
组件的props
,render
函数则将渲染具体的组件(_extends
函数作用是合并对象,对象中包含extraProps
,props
及路由对象自身),阅读完后便可以理解为何没有渲染嵌套路由的组件了,源码没有处理嵌套路由,所以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>
);
};
这时候再看看页面中的表现,嵌套路由对应的组件就渲染成功了