React Router v4使用Link导航组件未更新，路由结构问题排查

嘿，我一眼就瞅出你的问题啦！这是React Router v4里超常见的路由匹配坑👇

问题根源 #

你的<Switch>组件是按从上到下的顺序匹配路由的，而第一个<Route path='' component={Home} />没加exact属性。React Router v4默认是模糊匹配——只要当前URL的开头包含路由的path，就会匹配成功。空字符串的path会匹配所有URL，所以不管你点Link跳去/profile还是留在根路径，Switch都会优先渲染Home组件，根本不会去检查后面的Profile路由。

两种解决方案 #

方案1：给Home路由加exact属性 #

给根路径的路由加上exact，确保只有当URL完全等于根路径时才渲染Home组件。另外建议把path写成"/"，这样更清晰规范：

class App extends React.Component { 
  render() { 
    return( 
      <BrowserRouter> 
        <div> 
          <AuthRoute></AuthRoute> 
          <Switch> 
            {/* 添加exact属性，仅完全匹配根路径时渲染Home */}
            <Route exact path="/" component={Home} /> 
            <Route path='/profile' component={Profile} /> 
          </Switch> 
        </div> 
      </BrowserRouter> 
    ) 
  } 
}

方案2：把Home路由放在Switch的最后 #

Switch会在匹配到第一个符合条件的路由后停止，所以把Home路由放在所有路由的最后，作为「默认路由」——只有前面的路由都不匹配时，才会渲染Home：

class App extends React.Component { 
  render() { 
    return( 
      <BrowserRouter> 
        <div> 
          <AuthRoute></AuthRoute> 
          <Switch> 
            <Route path='/profile' component={Profile} /> 
            {/* 放在最后，作为兜底路由 */}
            <Route path="/" component={Home} /> 
          </Switch> 
        </div> 
      </BrowserRouter> 
    ) 
  } 
}

为什么这样能解决问题？ #

• exact属性强制路由进行精确匹配，避免根路径匹配所有子路径；
• 把Home路由放在最后，利用Switch的「匹配即停止」特性，确保其他路由优先被匹配。

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