react-router-dom v6测试报错：RouterProps不存在history属性

问题根源 #

react-router-dom v6完全重构了路由API，原有的<Router>组件（包括BrowserRouter/MemoryRouter）不再支持history属性，你用createMemoryHistory创建的实例无法直接传入<Router>，这就是TypeScript报错的核心原因。

解决方案 #

根据测试场景，推荐两种标准写法：

1. 直接使用MemoryRouter（最简洁，适合大部分测试场景）

MemoryRouter是v6内置的测试专用路由组件，内部会自动管理路由状态，无需手动创建history实例。可以通过initialEntries模拟初始路由（包括OAuth回调的URL参数）。

示例测试代码：

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import OAuthCallbackRoute from './OAuthCallbackRoute';

test('处理OAuth回调逻辑', () => {
  render(
    <MemoryRouter initialEntries={['/oauth/callback?code=test-auth-code']}>
      <OAuthCallbackRoute />
    </MemoryRouter>
  );

  // 这里添加你的断言逻辑，比如检查是否跳转到正确页面、是否处理了code参数等
});

2. 用createMemoryRouter + RouterProvider（需要手动控制路由状态时使用）

如果需要在测试中主动控制路由跳转、监听路由变化，可以用createMemoryRouter创建路由实例，再通过RouterProvider挂载。

示例测试代码：

import { render, screen } from '@testing-library/react';
import { createMemoryRouter, RouterProvider } from 'react-router-dom';
import OAuthCallbackRoute from './OAuthCallbackRoute';

test('验证回调后的路由跳转', () => {
  const router = createMemoryRouter(
    [
      {
        path: '/oauth/callback',
        element: <OAuthCallbackRoute />,
      },
      {
        path: '/dashboard',
        element: <div>Dashboard</div>,
      },
    ],
    {
      initialEntries: ['/oauth/callback?code=test-auth-code'],
    }
  );

  render(<RouterProvider router={router} />);

  // 模拟回调逻辑执行后，断言路由是否跳转到了dashboard
  expect(router.state.location.pathname).toBe('/dashboard');
});

关于替换navigator后的错误说明 #

v6中useNavigate返回的是跳转函数，而非旧版的history对象。如果之前替换后出现错误，大概率是沿用了v5的history操作逻辑（比如history.push），需要改成v6的navigate('/path')写法，同时确保测试时通过上述路由组件正确挂载组件。

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