使用react-router-dom的Link组件导致浏览器崩溃问题求助

问题原因 #

你的Nav组件直接挂载在RouterProvider之外，而Link组件必须在路由上下文（由RouterProvider提供）的范围内才能正常工作。当Link尝试通过useContext获取路由上下文时，因为不在上下文范围内，得到null，进而引发页面空白和控制台错误。

解决方案 #

将Nav组件移动到RouterProvider提供的路由上下文内部，最常用的方式是通过布局组件+Outlet实现：

步骤1：创建布局组件 #

新建一个Layout.jsx文件，将Nav和路由内容出口Outlet组合：

import { Outlet } from 'react-router-dom';
import Nav from './Pages/Nav';

const Layout = () => {
  return (
    <div>
      <Nav />
      {/* Outlet会渲染当前匹配的子路由组件 */}
      <Outlet />
    </div>
  );
};

export default Layout;

步骤2：修改路由配置 #

更新createBrowserRouter的路由结构，将布局组件作为根路由的element，并将原有的页面路由作为子路由：

import React from 'react';
import { 
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom';
import Home from './Pages/Home';
import Gallery from './Pages/Gallery';
import Layout from './Layout'; // 导入布局组件

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />, // 使用布局组件作为根元素
    children: [
      { path: "/", element: <Home /> },
      { path: "/Gallery", element: <Gallery /> },
    ]
  },
])

function App() {
  // 现在App只需要渲染RouterProvider即可
  return <RouterProvider router={router} />;
}

export default App;

为什么这样可行？ #

Layout组件被RouterProvider包裹，因此其内部的Nav（以及Link组件）可以正常访问路由上下文，Outlet则负责渲染当前匹配的子路由页面内容，既保证了导航栏的复用性，又解决了上下文缺失的问题。

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