使用react-router-dom@5.2.0的<Link>点击后页面不加载求助

以下是针对性的排查和修复方案：

• 确保路由结构被Router包裹
  所有路由相关组件（包括Link、Switch、Route）必须处于BrowserRouter（静态部署场景可用HashRouter）的上下文范围内，否则Link仅会修改URL，无法触发路由匹配与页面更新。示例正确结构：

  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <nav>
          <ul>
            <li>
              <Link className="nav-link active" aria-current="page" to="/">Home</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          {/* 其他路由配置 */}
        </Switch>
      </Router>
    );
  }
  

• 检查Switch与Route的配置正确性
  Switch组件只会渲染第一个匹配的Route，需注意：

  • 根路径/必须添加exact属性，避免拦截其他以/开头的路由（如/about）；
  • 确保Route的component或render属性指向正确的页面组件。示例：

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
    

• 避免多Router实例嵌套
  应用中只能存在一个顶层Router，不要在子组件中重复嵌套Router，否则会导致路由上下文冲突，Link的跳转无法被外层Switch捕获。

• 确保页面组件能响应路由变化
  若页面组件使用了React.memo或其他缓存策略，需确保它能感知路由变化：

  • 函数组件可使用useLocation hook，当location对象变化时触发组件重新渲染：

    import { useLocation } from 'react-router-dom';
    
    function Home() {
      const location = useLocation();
      return <div>Home Page</div>;
    }
    

  • 类组件可通过接收location props（需确保组件被Route的component属性渲染，而非手动传入）来触发更新。

• 排查自定义Link组件的默认行为
  若封装了自定义Link组件，确认未错误阻止默认跳转行为（如调用e.preventDefault()却未手动处理路由跳转）。

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