React Router 4 应用启动时将 '/' 重定向至指定路由的问题

我之前也踩过这个坑！你现在遇到的刷新重复重定向和警告问题，核心原因是没给根路径的重定向设置精确匹配，导致React Router的前缀匹配规则把/todos也当成了符合/的路径，进而触发重复重定向逻辑。

为什么原来的代码会出问题？ #

React Router的路径匹配默认是前缀匹配，也就是说path="/"会匹配所有以/开头的路径（包括/todos、/users这些）。你直接写<Redirect path="/" to="/todos" />，会在任何页面（包括/todos）都尝试执行重定向，自然就会出现"You tried to redirect to the same route you're currently on"的警告，刷新页面时也会重复触发这个逻辑。

对应Angular pathMatch: 'full'的解决方案 #

要实现和Angular里{ path: '', redirectTo: '/heroes', pathMatch: 'full' }一样的精确匹配效果，有两种常用写法：

写法1：用Route包裹Redirect并添加exact

<Route exact path="/">
  <Redirect to="/todos" />
</Route>
<Route exact path="/todos" component={Todo} />
<Route exact path="/users" component={User} />

给根路径的Route加上exact，只有当路径完全等于/时才会渲染Redirect组件，其他路径不会触发重定向。

写法2：直接给Redirect添加exact和from属性（React Router v5+支持）

<Redirect exact from="/" to="/todos" />
<Route exact path="/todos" component={Todo} />
<Route exact path="/users" component={User} />

from属性用来指定要匹配的源路径，配合exact就实现了“只有当路径完全是/时才重定向到/todos”的逻辑，和Angular的pathMatch: 'full'完全对应。

效果验证 #

修改后：

• 访问根路径/时，会自动跳转到/todos
• 刷新/todos页面时，因为路径不是精确的/，不会触发重定向，警告也会消失
• 访问/users页面时同样正常，不会被干扰

内容的提问来源于stack exchange，提问作者Muzammil Bilwani