React Router DOM V5路由失效问题求助

• 替换普通<a>标签为React Router的<Link>组件
  普通<a>标签会触发页面全量刷新，破坏单页应用的路由逻辑，必须用Link组件实现无刷新跳转：

  import { Link } from 'react-router-dom';
  
  // 侧边栏菜单项示例
  <Link to="/about">关于我们</Link>
  

• 检查路由配置是否正确
  根据React Router版本调整配置：

  • React Router v6版本：用<Routes>+<Route>组合，通过element属性绑定对应组件

    import { Routes, Route } from 'react-router-dom';
    
    function App() {
      return (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      );
    }
    

  • React Router v5版本：用<Switch>+<Route>组合，通过component属性绑定组件，根路由需加exact避免匹配所有子路由

    import { Switch, Route } from 'react-router-dom';
    
    function App() {
      return (
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      );
    }
    

• 确保所有路由相关代码在<BrowserRouter>内部
  根组件必须被<BrowserRouter>（或<HashRouter>）包裹，否则路由规则无法生效：

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
  

• 排查错误的重定向规则
  如果配置了Navigate（v6）或Redirect（v5），确认没有将所有未匹配路由强制重定向到首页：

  // v6错误示例：不要强制把所有未知路由跳转到首页
  <Route path="*" element={<Navigate to="/" />} />
  // 正确做法：渲染404页面或合理的默认页
  <Route path="*" element={<NotFound />} />
  

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