遷移到 react-router-dom v6

Question

我在react-router-dom v5 到 v6 之間遷移時遇到了問題。 更新我的 package 后，我對代碼進行了一些升級。 下面是我在 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>

有人可以告訴我如何解決這個問題嗎？ 看起來這個組件有不兼容的類型，不能 go 作為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>
      )}
    </>
  );
};