第
react中路由和按需加载的问题
目录react路由和按需加载问题1基本的路由设置2如何完成路由的菜单部分3如何将每个路由的js文件分开输出4react-router按需加载配置5最后效果react路由的基本使用1.先下包2.导入并使用3.使用HashRouter包裹整个应用4.使用Link指定导航链接5.使用Route指定路由规则(哪个路径展示哪个组件)6.精确匹配:exact7.Switch8.处理404页Redirect
react路由和按需加载问题
1基本的路由设置
react-router可以解决路由问题，只需要添加[基于react-router4.x]
yarnaddreact-router-dom
然后在index.js中引入它，使用：
import{Link,BrowserRouter,Switch,Route}fromreact-router-dom;
ReactDOM.render((
BrowserRouter
Switch
Routepath=/listcomponent={ListDemo}/
Routepath=/acomponent={A}/
Routepath=/bcomponent={B}/
/Switch
/BrowserRouter
),mountdom)
这样就完成了路由的设置，而超链接则可以使用提供的Link组件
Linkto=/aa/Link
等价于直接写ahref=/aa/a。
2如何完成路由的菜单部分
在每个menu中传一个url属性，然后url代表那个地方被高亮，每个路由都重新创建一个menu即如下：
BrowserRouter
Switch
Routeexactpath=/render={props=Menu{...props}url=listListDemo//SiderDemo}/
Routepath=/listrender={props=Menu{...props}url=listListDemo//SiderDemo}/
Routepath=/arender={props=Menu{...props}url=aA//SiderDemo}/
Routepath=/brender={props=Menu{...props}url=bB//SiderDemo}/
/Switch
/BrowserRouter
但是每个页面的初次加载都会闪一下，重新加载了js。要想不闪则需要路由嵌套：
//上来路由只匹配到Menu中
BrowserRouter
Switch
Routepath=/component={Menu}/
/Switch
/BrowserRouter
//上面的route就一个组件menu，在menu中再次定义route，可以实现路由嵌套
Menu
顶部/顶部
侧栏selectedurl={ps.location.pathname}
/侧栏
内容部分
Routeexactpath=/listcomponent={List}/
Routeexactpath=/acomponent={At}/
Routeexactpath=/bcomponent={Bt}/
/内容部分
Menu
这里主要是利用了每个页面都有的一个属性即props.location.pathname是路由属性
3如何将每个路由的js文件分开输出
1多入口文件的形式，但是不易于按需加载，只能是实现了分开输出，没啥用。一般写的都是单入口应用。
2异步import，或者require.ensure,然后在webpack中配置
output:{
filename:[name]-bundle.js,
chunkFilename:[name]-chunk.js,
path:__dirname+/dist
},
这样就生成一个bundle文件，多个chunk文件，name就是import的文件的名字，注意这里的注释是有用的直接决定了chunk输出的时候的[name]。
import(/*webpackChunkName:app*/./app).then(functio