- 引入路由管理,是针对项目中存在多个不同的,或者多层级的页面的一种比较好的解决方法,没有路由也不是不可以做,就是管理起来不是很方便。
- 要注意一下,当
react-router
升级到4.0以后就不再支持Route
的多级嵌套了,所以每次存在子路由的时候,可能需要一个公共的父级页面来专门渲染子路由。
- 首先是在
routes
文件夹下添加对应的路由配置文件。import { AsyncComponent } from 'Utils/component';
const Main = AsyncComponent(() => import('Pages/main'));
const Home = AsyncComponent(() => import('Pages/Home'));
const HelloWorld = AsyncComponent(() => import('Components/test/HelloWorld'));
const routes = [
{
path: '/',
component: Main,
exact: true // 严格匹配,保证刚进来的时候直接展示首页
},
{
path: '/',
component: Home, // 模糊匹配,进入子路由的时候,就会走这里
children: [
{
path: '/hello',
component: HelloWorld
}
]
}
];
export default routes;
- 然后是多路由的渲染,我将其抽离出来,方便后续可以增加功能,比如可以将全局的search参数做处理后传入路由对应的组件,方便使用
/**
* 路由遍历功能
*/
const renderRoutes = (routes) => {
return routes.map((route, index) => {
const { children, path, exact = false } = route;
/**
* 可以在这里做一些全局的处理,把search参数处理之后传进route.component,这样就不用每个页面都要对search参数去做一次处理
*/
const search = location.search;
const query = searchToQuery(search); // 将search字符串变成一个对象,然后传入
return (
<Route
path={path}
exact={exact}
key={`${route.path}-${index}`}
render={props => <route.component {...props} routes={children} urlQuery={query} />}
/>
)
})
}
- 在入口文件
index.js
中使用路由。import React from "react";
import ReactDOM from "react-dom";
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
import { renderRoutes } from 'Utils/component';
import routes from 'Routes';
const browserHistory = createBrowserHistory();
// 使用browserHistory有一个注意点,本地开发时,需要将webpack的config.devServer.historyApiFallback设置为true。不然会出现你输入路径时,把路径当做接口来访问,而不是当做路由。
function render() {
ReactDOM.render(
<Router history={browserHistory}>
{
renderRoutes(routes)
}
</Router>,
document.getElementById("root")
);
}
render();
- 至此,我们的异步加载组件和多级路由全部加入,下一次就是配置redux。