React Router Link点击后地址更新但组件不渲染的问题解决方法

嘿，我一眼就看出问题所在了！这是React Router新手常踩的坑，咱们一步步解决：

核心问题：根路由缺少exact属性 #

React Router的Route是从上到下匹配路径的，你写的第一个路由<Route path="/" component={Home} />没有加exact，这意味着所有以/开头的路径（也就是所有路径）都会优先匹配这个路由，后面的/about、/product等路由根本没机会渲染对应的组件。这就是为什么地址栏变了，但页面还是Home的原因。

修复步骤 #

1. 给根路由添加exact属性

修改你的App.js代码，确保只有当路径完全等于/时才渲染Home组件：

function App() { 
  return ( 
    <> 
      <Switch> 
        {/* 关键：添加exact属性 */}
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/product" component={Product}/> 
        <Route path='/cart' component={Cart}/> 
        {/* 如果需要Contact和Account页面，记得补充对应的Route */}
        {/* <Route path="/contact" component={Contact} /> */}
        {/* <Route path="/account" component={Account} /> */}
      </Switch> 
    </> 
  ); 
}

2. 修正NavBar里的Link路径

你的NavBar里有几个Link路径和路由不匹配：

• Home的Link写的是to="/home"，但路由里首页是/，需要改成to="/"
• Contact和Account的Link都指向/，如果这两个是独立页面，要改成对应的路径（比如/contact、/account），如果就是指向首页，那没问题，但建议保持路径语义一致。

修改后的NavBar Link部分：

<ul id="MenuItems" style={ {maxHeight: ulHeight }}>
  <li><Link to="/">Home</Link></li> {/* 修正为首页路径 */}
  <li><Link to="/product">Products</Link></li>
  <li><Link to="/about">About</Link></li>
  <li><Link to="/contact">Contact</Link></li> {/* 对应未来的Contact路由 */}
  <li><Link to="/account">Account</Link></li> {/* 对应未来的Account路由 */}
</ul>

额外检查 #

确保你的NavBar组件是被包裹在BrowserRouter范围内的（你说已经在index.js里引入了，应该没问题）。如果NavBar是在App组件外面渲染的，那必须把它放到BrowserRouter标签里面，否则Link会失效。

现在再点击Link试试，应该就能正常跳转渲染对应的组件啦！

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