react-router-redux@5.0.0如何配置无匹配时的默认路由？

嘿，这个问题我太熟悉了！react-router-redux 5.x版本里确实不能直接沿用4.x的默认路由写法，但用<Switch>组件就能轻松解决你的困扰——它刚好能实现“只渲染第一个匹配的路由”的需求，完美避免默认组件全局渲染的问题。

具体实现步骤： #

• 首先确保你导入了react-router-dom里的<Switch>组件（它是react-router核心的一部分，和react-router-redux 5.x兼容完全没问题）
• 把你现有的所有路由都包裹在<Switch>标签内部
• 将你的默认路由<Route component={Default} />放在所有路由的最后

示例代码： #

import { Switch, Route } from 'react-router-dom';

// 修改后的路由配置
<Switch>
  <Route path='/login' component={Login} />
  <Route exact path='/' component={Home} />
  {/* 这个默认路由只会在前面的路由都不匹配时才会被渲染 */}
  <Route component={Default} />
</Switch>

原理说明： #

<Switch>组件会从上到下依次匹配子路由，一旦找到第一个符合路径条件的路由，就会停止后续的匹配和渲染。所以把默认路由放在最后，只有当/login和/都不匹配时，它才会被渲染出来，完全符合你的需求。

我当时在项目里遇到同样问题时就是这么解决的，亲测有效！

内容的提问来源于stack exchange，提问作者Sasha Kos