初学React JS遇页面跳转报错 导航配置问题排查求解

这是React Router v6版本的典型配置错误，核心原因是：所有路由相关能力（包括<Link>声明式跳转组件、useNavigate/useParams/useLocation等路由钩子），只能在<BrowserRouter>、<HashRouter>这类Router容器组件的子组件范围内调用。你当前的报错和跳转逻辑本身无关，是路由容器的包裹范围配置错误，导致组件拿不到路由上下文。

按以下优先级排查问题：

• 检查根入口的组件嵌套顺序
  绝大多数新手踩这个坑都是因为把业务组件写在了Router组件外面，错误写法示例：

  // src/main.jsx 错误写法
  ReactDOM.createRoot(document.getElementById('root')).render(
    <>
      <App />
      <BrowserRouter></BrowserRouter>
    </>
  )
  

  调整嵌套顺序，把所有用到路由能力的组件全部放到Router组件的子节点中：

  // src/main.jsx 正确写法
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  )
  

• 检查局部组件的包裹范围
  如果你是在组件局部挂载路由，要确认所有写了<Link to="xxx">、调用了navigate()跳转方法的组件，都处于Router组件的包裹范围内，不要在Router的同级、外层节点写路由跳转逻辑。
• 检查依赖版本一致性
  如果嵌套顺序没问题，执行命令检查本地安装的react-router相关依赖版本是否匹配：

  npm ls react-router react-router-dom
  

  如果出现版本不一致、缺失依赖的情况，重新安装6.x版本的react-router-dom即可：

  npm install react-router-dom@6
  

配置修复完成后，两种跳转方式都可以正常使用：

import { Link, useNavigate } from 'react-router-dom'

function Page() {
  const navigate = useNavigate()
  return (
    <div>
      {/* 声明式跳转，类似a标签 */}
      <Link to="/target-page">点击跳转到目标页</Link>
      {/* 编程式跳转，适合在事件逻辑里触发 */}
      <button onClick={() => navigate('/target-page')}>按钮触发跳转</button>
    </div>
  )
}

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