使用MemoryRouter包裹React组件测试时出现Route报错如何解决

问题原因 #

你使用的是React Router v6版本，该版本存在破坏性更新：所有<Route>组件不能直接作为<MemoryRouter>的子元素，必须嵌套在<Routes>组件内部才能使用。<Routes>的作用类似v5版本的<Switch>，会根据当前路径匹配对应要渲染的路由组件。

修复步骤 #

1. 先从react-router-dom依赖中引入Routes组件
2. 修改测试代码，在原有的<Route>外层包裹<Routes>标签

修正后的代码如下：

component = render(
  <Provider store={store}>
    <MemoryRouter initialEntries={['/characters/1009368']}>
      <Routes>
        <Route path="characters/:id">
          <CharacterDetail />
        </Route>
      </Routes>
    </MemoryRouter>
  </Provider>
);

内容的提问来源于stack exchange，提问作者Alex Cuadra