React Router v4路由问题：根路径重复渲染组件及重定向警告

首先得说，你的路由结构没搞对，这才是导致访问"/"时渲染两个组件的根本原因！

问题根源分析 #

Switch组件的作用是只渲染第一个匹配当前路径的子路由组件，但你把Navbar直接放在了Switch里面当第一个子元素——这就导致Switch直接渲染Navbar，而Navbar内部的Route没有被Switch包裹，所以所有符合匹配条件的Route都会同时渲染：

• 访问"/"时，exact path="/"的Route匹配并渲染App
• 那个没有写path的Route默认匹配所有路径，所以也会渲染NotFound
  于是两个组件就同时出现了。

第一步：修正路由结构 #

把Navbar移到Switch外面（作为全局导航组件），让Switch直接包裹所有Route和Redirect，这样Switch才能正确只匹配第一个符合条件的路由：

// 正确的结构示例
<div>
  {/* Navbar作为全局组件，始终渲染 */}
  <Navbar>
    {/* 这里放你的导航链接，比如<NavLink to="/">首页</NavLink>之类的 */}
  </Navbar>
  {/* Switch直接管理路由匹配 */}
  <Switch>
    <Route exact path="/" component={App} />
    <Route path="/Other" component={Other} />
    {/* 这里放404处理逻辑 */}
  </Switch>
</div>

第二步：处理404场景（两种方案） #

方案1：渲染NotFound组件

只要把NotFound的Route放在Switch的最后面，这样前面的路由都不匹配时，就会自动渲染它：

<Switch>
  <Route exact path="/" component={App} />
  <Route path="/Other" component={Other} />
  {/* 最后一个Route，匹配所有未命中的路径 */}
  <Route component={NotFound} />
</Switch>

方案2：重定向到根路由并消除警告

直接用<Redirect to="/" />会导致在已经处于"/"路径时触发重复重定向，所以得加个判断：只有当前路径不是"/"时才重定向。用Route的render属性来实现：

<Switch>
  <Route exact path="/" component={App} />
  <Route path="/Other" component={Other} />
  {/* 匹配所有未命中的路径，判断后再重定向 */}
  <Route path="*" render={() => {
    const currentPath = window.location.pathname;
    return currentPath !== "/" ? <Redirect to="/" /> : null;
  }} />
</Switch>

或者更简洁的写法：

<Route path="*" render={() => 
  window.location.pathname !== "/" ? <Redirect to="/" /> : null
} />

这样既实现了错误路径重定向到根路由的需求，又不会出现重复重定向的警告。

补充：关于Navbar的children #

你原来的Navbar用了this.props.children，其实如果Navbar只是负责导航栏UI，不需要传递路由组件当children，直接把导航链接写在Navbar内部就好。如果确实需要在Navbar里动态渲染内容，也别把Route放进去，而是把需要展示的内容作为children传递，路由逻辑交给Switch处理。

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