useNavigate() 只能在 <Router> 组件的上下文中使用

Question

我的代码目前是这样的，我正在尝试使用 react-router-dom 添加这个返回上一页的按钮，但我收到以下错误，并且我网站上的所有组件都消失了。

错误：

 useNavigate() may be used only in the context of a component

我的代码：

 function App() {
  const navigate = useNavigate();
  return (
    <BrowserRouter>
      <div>
      <button onClick={() => navigate(-1)}>go back</button>
        <Nav/>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/home" element={<Home/>}/>
          <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
          <Route exact path="/record/:user" element={<Record/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

这是我在控制台中遇到的错误：

原文由 kid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此错误引发 useNavigate 。 useInRouterContext 将检查组件（使用 useNavigate 挂钩）是否是 <Router> 的后代。

这是解释为什么不能在 useNavigate Router useLocation 之外使用的源代码：

useNavigate 使用 useLocation ， useLocation 将从 LocationContext 提供程序获取 位置。如果要获取反应上下文，则应将组件呈现为上下文提供者的后代。 Router 组件使用 LocationContext.Provider 和 NavigationContext.Provider 。这就是为什么您需要将组件渲染为 子 组件，以便 useNavigate 挂钩可以从 NavigationContext 和 LocationContext 获取上下文数据。

你的环境是浏览器，所以你需要使用 BrowserRouter 。 BrowserRouter 基于 Router 构建。

重构为：

App.jsx ：

 function App() {
  const navigate = useNavigate();
  return (
      <div>
        <button onClick={() => navigate(-1)}>go back</button>
        <Nav/>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/home" element={<Home/>}/>
          <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
          <Route exact path="/record/:user" element={<Record/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </div>
  );
}

index.jsx :

 import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById('root')
)

原文由 slideshowp2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了同样的问题，但是测试了一个带有钩子的组件 useNavigate 。通过将我的组件包装在 Route 和 Routes 和 BrowserRouter 中解决了这个问题。希望这可以帮助其他人遇到同样的错误。

 let container = null;
    beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
});

afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
});

test('finds qualified insurrance policies', () => {
    act(() => {
    render(
    <BrowserRouter>
        <Routes>
            <Route path="*" element= {<QuaifiedPolicies policyTypes={false} />}/>
        </Routes>
    </BrowserRouter>
        , container);
    });
    expect(screen.getByLabelText('some text'))
});

原文由 Spencer Blum 发布，翻译遵循 CC BY-SA 4.0 许可协议