如何正确编写navlink？

Question

导航链接在浏览器中不起作用，它显示：未捕获类型错误：无法解构“React.useContext（...）”的属性“未来”，因为它为空。我在其他项目中使用过NavLink并且工作正常。

或

上述错误发生在组件中：

at NavLinkWithRef (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e0f9a68a:4832:21)
at li
at ul
at div
at Sidebar (http://localhost:5173/src/Sidebar.jsx?t=1706876271727:25:33)
at div
at App

Sidebar.jsx NavLink is the problem

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 时，一切正常，所以有问题。

Answer 1

BrowserRouter

应包裹整个应用程序。在您当前的结构中，

Sidebar

组件正在将

NavLink

渲染在

BrowserRouter

之外。移动

BrowserRouter

以包裹整个

App

组件，包括

Sidebar

。

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 (
    <BrowserRouter>
      <div className="App">
        <Sidebar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Create" element={<CreateRecipe />} />
          <Route path="/Recipes" element={<Recipes />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Answer 2

为了能够在 Sidebar 中使用 NavLink，您需要将 Sidebar 插入到 BrowserRouter:

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/>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/Create" element={<CreateRecipe/>}/>
        <Route path="/Recipes" element={<Recipes/>}/>
      </Routes>
    </BrowserRouter>
   </div>
  )
}

export default App;