React JS：两个链接指向同一路由，其一无法渲染组件

嘿，我来帮你排查这个问题！听起来第二个组件的路由跳转虽然地址栏能跳到localhost:3000，但<Route exact path='/' render={() => <Home />} />就是不渲染Home组件，这种情况我碰到过好几次，大概率是跳转方式或者路由配置的问题，咱们一步步来理：

1. 先检查第二个组件的跳转方式是否正确 #

很多人会不小心用普通的<a>标签来跳转，这会导致页面整页刷新，虽然地址栏变了，但React Router的客户端路由机制没触发，自然不会渲染Home组件。

• 错误示例（别这么写）：

  <a href="/">回到首页</a>
  

• 正确做法：用React Router提供的<Link>组件：

  import { Link } from 'react-router-dom';
  // 组件内部
  <Link to="/">回到首页</Link>
  

2. 确认路由的包裹层级是否正确 #

要确保你的<Route>和第二个组件都被<BrowserRouter>（或其他Router组件，比如HashRouter）包裹着。如果第二个组件在Router的范围之外，就算地址栏变了，路由系统也感知不到，自然不会触发组件渲染。
举个正确的App结构例子：

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

function App() {
  return (
    <Router>
      <MainMenu /> {/* 正常的菜单组件 */}
      <YourSecondComponent /> {/* 第二个组件必须放在Router内部 */}
      <Switch>
        <Route exact path='/' render={() => <Home />} />
        {/* 其他路由配置... */}
      </Switch>
    </Router>
  );
}

3. 检查是否用对了路由匹配容器（区分React Router版本） #

• 如果你用的是React Router v5及以下：一定要用<Switch>组件包裹路由，它会只渲染第一个匹配的路由，避免多个路由同时匹配的问题。确保你的Home路由是第一个被匹配的项。
• 如果你用的是React Router v6：<Switch>被换成了<Routes>，写法也不一样了，得改成这样：

  import { Routes, Route } from 'react-router-dom';
  // ...
  <Routes>
    <Route path='/' element={<Home />} />
  </Routes>
  

4. 如果是编程式导航，检查逻辑是否正确 #

要是第二个组件用的是按钮点击触发跳转（编程式导航），得确保获取的路由对象是对的：

• React Router v5用useHistory钩子：

  import { useHistory } from 'react-router-dom';
  
  function YourSecondComponent() {
    const history = useHistory();
    const goHome = () => {
      history.push('/');
    };
    return <button onClick={goHome}>回到首页</button>;
  }
  

• React Router v6用useNavigate钩子：

  import { useNavigate } from 'react-router-dom';
  
  function YourSecondComponent() {
    const navigate = useNavigate();
    const goHome = () => {
      navigate('/');
    };
    return <button onClick={goHome}>回到首页</button>;
  }
  

5. 再确认exact属性的使用（仅v5及以下） #

你已经加了exact path='/'，这本身没问题，但要注意：如果<Switch>里有其他路由在Home路由前面，且那个路由的path也能匹配/（比如path='/dashboard'其实不会，但如果是path='/'放在后面就会被前面的路由拦截），所以把Home路由放在<Switch>的最前面更稳妥。

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