点击导航栏Cars选项时React Router无响应问题求助

问题根源 #

• 初始路由配置中，根路径path="/"未添加exact属性，React Router的Switch会优先匹配第一个符合前缀的路由，所有路径都以/开头，因此无论地址栏是/cars还是其他路径，都会一直渲染Home组件。
• 修改为<Route path="/" exact>后，虽然能正常进入/cars页面，但导航栏的Home链接指向/home，而路由中未配置/home对应的路由规则，导致点击Home无法返回首页。

解决方案 #

方案1：将首页路由设为根路径（推荐） #

1. 修改导航栏的Home链接，指向根路径/：

<Nav.Link as={Link} to="/">Home</Nav.Link>

2. 保持App路由中根路径的exact属性，并按合理顺序排列路由：

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          {/* 具体路由放在前面 */}
          <Route exact path="/cars">
            <Cars />
          </Route>
          <Route exact path="/About">
            <About />
          </Route>
          <Route exact path="/Support">
            <Support />
          </Route>
          <Route exact path="/Register">
            <Register />
          </Route>
          <Route exact path="/Login">
            <Login />
          </Route>
          {/* 根路径路由放在最后 */}
          <Route exact path="/">
            <Home />
          </Route> 
        </Switch>     
      </div>
    </Router>
  );
}

方案2：保留/home路径的配置 #

如果希望首页路径为/home，需要添加对应的路由规则，并可将根路径重定向到/home：

1. 导航栏的Home链接保持to="/home"不变
2. 修改App路由配置：

import { Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/cars">
            <Cars />
          </Route>
          {/* 其他路由... */}
          {/* 根路径重定向到/home */}
          <Route path="/">
            <Redirect to="/home" />
          </Route> 
        </Switch>     
      </div>
    </Router>
  );
}

关键说明 #

• exact属性是核心：它强制路由仅在路径完全匹配时才渲染组件，避免根路径匹配所有子路径的问题。
• Switch组件按顺序匹配路由，建议将具体路径（如/cars、/home）放在根路径路由之前，确保优先匹配。

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