迁移到 react-router-dom v6

Question

我在 react-router-dom v5 到 v6 之间迁移时遇到问题。更新我的包后，我对代码进行了一些升级。下面是我在 v5 和 v6 中的代码版本以及 Routing 组件，这给我带来了问题。

v5

export default function App() {
  return (
    <div className="App">
      <Switch>
        <AppContextProvider>
          <Routing />
        </AppContextProvider>
      </Switch>
    </div>
  );
}

v6

export default function App() {
  return (
    <div className="App">
      <AppContextProvider>
        <Routes>
          <Routing />
        </Routes>
      </AppContextProvider>
    </div>
  );
}

<Routing />分量

const Routing = (): JSX.Element => {
  return (
    <>
      {publicRouting.map(({ path, component }, i) => (
        <Route key={i} path={path} element={component} />
      ))}
      {isAuthenticated() && (
        <Main>
          {routing.map(({ path, component }, i) => (
            <Route  key={i} path={path} element={component} />
          ))}
        </Main>
      )}
    </>
  );
};

现在控制台抛出这个错误：

index.tsx:19 Uncaught Error: [Routing] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

谁能告诉我如何解决这个问题？看起来这个组件的类型不兼容，不能作为 Routes 组件之间的子组件，但为什么他们改变了它？如何更正我的 Routing 组件？

感谢您的帮助！

Answer 1

在 react-router-dom v6 中，Routes 组件只能有 Route 或 React.Fragment 作为有效子组件，而 Route 组件只能有 Routes 或另一个 Route 组件作为父组件。

Routes 组件有效地取代了 RRDv5 Switch 组件，因为它处理路由匹配和渲染逻辑，现在需要直接包装它管理的 Route 组件。

将 Routes 组件移动到 Routing 中以直接包装正在映射的 Route 组件。

export default function App() {
  return (
    <div className="App">
      <AppContextProvider>
        <Routing />
      </AppContextProvider>
    </div>
  );
}

...

const Routing = (): JSX.Element => {
  return (
    <>
      <Routes>
        {publicRouting.map(({ path, component }, i) => (
          <Route key={i} path={path} element={component} />
        ))}
      </Routes>
      {isAuthenticated() && (
        <Main>
          <Routes>
            {routing.map(({ path, component }, i) => (
              <Route  key={i} path={path} element={component} />
            ))}
          </Routes>
        </Main>
      )}
    </>
  );
};

迁移到 react-router-dom v6

Migration to react-router-dom v6

javascript

reactjs

react-router

react-router-dom