如何正确使用NavLink？报解构'future'为null的TypeError错误

在React项目中使用react-router-dom的NavLink时，浏览器抛出错误：Uncaught TypeError: Cannot destructure property 'future' of 'React.useContext(...)' as it is null。此前在其他项目中使用NavLink一切正常，错误发生在NavLinkWithRef组件，调用栈指向Sidebar组件，移除NavLink后项目恢复正常。

相关代码如下：

Sidebar.jsx #

import { useState } from "react";
import "./styles/Sidebar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAdd, faHouse, faList } from "@fortawesome/free-solid-svg-icons";

import { NavLink } from "react-router-dom";

const Sidebar = () => {
  const [sidebar, setSidebar] = useState("sidebar");
  const [display1, setDisplay1] = useState("Home");
  const [display2, setDisplay2] = useState("Create");
  const [display3, setDisplay3] = useState("Recipes");

  const toggleSidebar = () => {
    setDisplay1(sidebar === "sidebar" ? <FontAwesomeIcon icon={faHouse} /> : "Home");
    setDisplay2(sidebar === "sidebar" ? <FontAwesomeIcon icon={faAdd} /> : "Create");
    setDisplay3(sidebar === "sidebar" ? <FontAwesomeIcon icon={faList} /> : "Recipes");
    setSidebar(sidebar === "sidebar" ? "hiddenbar" : "sidebar");
  };

  return (
    <div className={sidebar}>
      <div className="burger" onClick={toggleSidebar}>
        <div className="part"></div>
        <div className="part"></div>
        <div className="part"></div>
      </div>

      <ul className="sidebarList">
        <li className="sidebarListItem">{display1}</li>
        <li className="sidebarListItem">
          <NavLink to="/Create">{display2}</NavLink>
        </li>
        <li className="sidebarListItem">{display3}</li>
      </ul>
    </div>
  );
};

export default Sidebar;

App.jsx #

import './styles/App.css'
import Sidebar from "./Sidebar";

import Home from './Home';
import CreateRecipe from './CreateRecipe';
import Recipes from './Recipes';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {


  return (
   <div className="App">

    <Sidebar/>


    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/Create" element={<CreateRecipe/>}/>
        <Route path="/Recipes" element={<Recipes/>}/>
      </Routes>
    </BrowserRouter>
   </div>
  )
}

export default App;

这个错误的核心原因是**NavLink必须在BrowserRouter（或其他路由上下文提供者，如HashRouter）的内部使用**。你的代码中Sidebar组件位于BrowserRouter外部，导致NavLink无法获取路由上下文，进而抛出解构null的错误。

修改步骤 #

将Sidebar组件移动到BrowserRouter内部，确保所有使用路由相关组件（如NavLink、Link、useNavigate等）的组件都处于路由上下文的包裹范围内。

修改后的App.jsx代码：

import './styles/App.css'
import Sidebar from "./Sidebar";

import Home from './Home';
import CreateRecipe from './CreateRecipe';
import Recipes from './Recipes';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
   <div className="App">
    <BrowserRouter>
      {/* Sidebar 现在处于路由上下文内部 */}
      <Sidebar/>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/Create" element={<CreateRecipe/>}/>
        <Route path="/Recipes" element={<Recipes/>}/>
      </Routes>
    </BrowserRouter>
   </div>
  )
}

export default App;

额外提示 #

• 所有依赖路由上下文的组件都必须放在BrowserRouter的子树中，否则都会因无法获取路由上下文而报错。
• 若需在路由外部实现导航功能，可考虑使用useNavigate的替代方案，或确保对应组件处于路由上下文内。

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