有时,当我们使用react-router模块在路由切换时会出现页面空白的情况,这次就将该情况讲解清楚并解决。
出现的问题
下面,我们直接上有问题的代码:
<Switch>
<Route path={"/"} component={loadable(() => import("./App.jsx"))} />
<Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} />
<Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>
这个代码是我们经常会用到的其中之一,其实解决这种代码的页面空白问题很简单,就是直接在Route标签内给她添加exact字段,通过强制匹配规则使路由跟页面组件匹配到一起,但是使用exact时会出现二级页面匹配不上。
因为react-router的匹配规则在Switch标签中是从上往下匹配,当路由需要跳转至home路由时,它是首先匹配到当前路由的根路径,根路径 可以匹配任何该路由下的二级路由,但是因为根路径没有绑定页面,所以会是空白。
这种问题很容易就能解决,
<Switch>
<Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} />
<Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} />
<Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>
看上面一段代码,将根路由路由移动到Switch标签内部的最下方就可解决。
因为Switch标签的匹配规则,此时会变成当其他二级路由匹配不到时,才会去匹配根路径,并且根路径上加上了exact强制匹配字段,使根路径可以强制匹配。如此路由还有二级路由,exact字段去掉即可。
当使用类似react-router-config等react路由管理模块包时,非常容易出现白屏现象,这是因为对于react路由的不熟悉和对于第三方模块包的不熟悉导致的。
const routes = [
{
path: "/",
component: Home,
routes: [
{
path: "/",
render: () => <Redirect to="/user" />
},
{
path: "/user",
component: User,
exact: true
},
{
path: "/content",
component: Content,
exact: true
}
]
},
{
path: "/login",
component: Login,
exact: true
}
]
此时,会引起页面空白的因素有很多,我们只说其中最具有特点的三种。