React Router 6中使用Link组件页面空白问题求助

以下是几个常见问题点及解决方法：

• 未用 Router 组件包裹应用
  React Router 6 要求所有路由相关组件（包括 Link、Routes、Route）必须在 BrowserRouter 这类 Router 组件的范围内才能正常工作。
  解决：在应用入口或 App 组件外层添加包裹：

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

• Link 的 to 属性配置错误
  确保 to 属性使用正确格式：

  • 字符串路径：to="/home"
  • 对象传参格式：to={{ pathname: '/user', search: '?id=123' }}
    避免拼写错误或格式错误导致路由无法匹配。

• 路由配置未对应 Link 路径
  检查 <Routes> 和 <Route> 配置，确保每个 Link 指向的路径都有对应的 Route，且 Route 必须放在 <Routes> 内部：

  import { Routes, Route } from 'react-router-dom';
  import Home from './pages/Home';
  import About from './pages/About';
  
  function App() {
    return (
      <div>
        <Header /> {/* 包含 Link 的组件 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    );
  }
  

• 组件导入错误
  确认 Link 从 react-router-dom 正确导入，不要导入错误的包：

  // 正确
  import { Link } from 'react-router-dom';
  
  // 错误示例
  import { Link } from 'react-router';
  

• 嵌套路由配置问题
  使用嵌套路由时，父路由路径需添加 /* 匹配子路由，同时子组件内用 <Outlet> 渲染子路由内容：
  父路由配置：

  <Route path="/dashboard/*" element={<Dashboard />} />
  

  Dashboard 组件内：

  import { Outlet, Link } from 'react-router-dom';
  
  function Dashboard() {
    return (
      <div>
        <Link to="/dashboard/profile">个人中心</Link>
        <Outlet /> {/* 子路由内容渲染位置 */}
      </div>
    );
  }
  

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