\"useNavigate() 只能在 <Router> 组件的上下文中使用\" 在测试我的反应应用程序时收到此错误答案

【问题标题】："useNavigate() may be used only in the context of a <Router> component" getting this error while testing my react app\"useNavigate() 只能在 <Router> 组件的上下文中使用\" 在测试我的反应应用程序时收到此错误
【发布时间】：2022-11-03 18:30:09
【问题描述】：

我尝试测试我的反应组件并得到这个错误 -

useNavigate() may be used only in the context of a <Router> component.

我的测试代码 -

import { render, screen } from '@testing-library/react';
import Login from '../pages/Login';

test("email input should be rendered", ()=>{
    render(<Login />);
    const emailInputElem = screen.getByLabelText(/Email Address/i);
    expect(emailInputElem).toBeInTheDocument()
})

我尝试测试的组件 -

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { status, error, user } = useSelector((state) => state.auth);

  const navigateToDashboard = () => {
    return !error && navigate('/app/dashboard', { replace: true });
  };

  const LoginUser = async (data) => {
    dispatch(loginUser(data, navigateToDashboard));
  };
return 
    .......
    .......
    .......
};

此应用程序在我的系统中运行良好，那么为什么会出现此错误？请帮我解决这个错误。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

useNavigator 是用于导航到另一个组件的钩子。首先，我们制作一个路由器来导航到组件。您需要使用 Browse Router 包装您的应用程序，它在 react-router-dom 中可用。你可以参考这个文档： [1]：https://v5.reactrouter.com/web/guides/quick-start

【讨论】：