useLocation() 即使在 Router 上下文中也不起作用

Question

以下是我的进口商品：

import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import About from './components/About';
import Works from "./components/Works";
import Contact from "./components/Contact";

下面是 App 组件：

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <Router>
      <div className="App">
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );
}

现在，当我运行代码时，我的应用程序完全崩溃了，我遇到了以下错误：

Uncaught Error: useLocation() may be used only in the context of a <Router> component.

即使我删除 const location = useLocation() 声明并直接使用 useLocation() 将道具发送到 <Routes>，问题仍然存在，如下所示：

return (
    <Router>
      <div className="App">
        <Routes location={useLocation()} key={useLocation().pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );

有人可以给我一些提示，告诉我应该采取哪些不同的做法吗？

Answer 1

问题

App 组件正在呈现提供路由上下文的 Router，因此 App 本身不能使用 useLocation 挂钩，因为它是 在路由器外。

解决方案

我假设 Router 确实 higher-level 路由器之一（BrowserRouter，MemoryRouter，等等）。将 ReactTree 中的 Router 移动到比 App 组件更高的位置，以便为 App 提供路由上下文并允许正确使用 useLocation 挂钩。

示例：

<Router>
  <App />
</Router>

应用程序

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <div className="App">
      <Routes location={location} key={location.pathname}>
        <Route path='/' element={<Home/>} />
        <Route path='/about' element={<About/>} />
        <Route path='/works' element={<Works/>} />
        <Route path='/contact' element={<Contact/>} />
      </Routes>
    </div>
  );
}

useLocation() 即使在 Router 上下文中也不起作用

useLocation() is not working even inside the Router context

javascript

reactjs

react-router-dom

react-hooks

问题

解决方案