react中路由和按需加载的问题.docx

第

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