React使用NavLink报错：无法解构null值的'future'属性

错误原因 #

你的Header组件渲染在RouterProvider之外，而NavLink（包括Link）必须在React Router提供的路由上下文中才能正常工作——路由上下文由RouterProvider创建，不在这个范围内的组件无法获取路由相关的上下文数据，因此会抛出解构null的错误。

修复方案 #

有两种常用的修复方式：

方式一：使用布局路由（推荐） #

通过React Router的布局路由，把Header和Footer作为共享布局包裹所有页面组件，确保它们处于路由上下文内：

修改index.js中的路由配置：

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    createBrowserRouter,
    RouterProvider,
    Outlet, // 新增：用于渲染子路由内容
} from "react-router-dom";

import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
// 导入你的页面组件 Home、About、Error404...

// 定义共享布局组件
const Layout = () => {
  return (
    <>
      <Header />
      <main>
        <Outlet /> {/* 此处会渲染匹配的子路由页面 */}
      </main>
      <Footer />
    </>
  );
};

const router = createBrowserRouter([
  {
    element: <Layout />, // 用布局组件作为根路由元素
    errorElement: <Error404 />,
    children: [ // 子路由对应各个页面
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 整个布局现在处于路由上下文内 */}
  </React.StrictMode>
);

方式二：将Header移入路由组件内部 #

如果不想用布局路由，也可以把Header直接放到每个页面组件里，或者确保它被RouterProvider包裹：

修改index.js的渲染部分：

root.render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 先渲染RouterProvider，确保上下文存在 */}
  </React.StrictMode>
);

之后在Home、About等页面组件中引入并渲染Header即可。

补充说明 #

你提到其他组件用Link正常工作，是因为那些组件本身在RouterProvider渲染的路由页面（比如Home、About）内部，自然处于路由上下文范围内，而之前的Header在上下文之外，所以无法获取必要的路由数据。

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