路由器：沒有路由匹配位置“/”錯誤react-router-dom v6

Question

我最近從react-router-dom V5 to v6 ，我收到以下消息：

index.js:44 No routes matched location "/"

這是我的 App 組件的外觀

const joinedSignupRoutes = `/(${allSteps
  .map((step) => step.path.substr(1))
  .join('|')})`;

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
      <Routes>
        <Route path={joinedSignupRoutes} element={<RegistrationRoutes />} />

任何關於如何解決這個問題的想法將不勝感激。

Answer 1

為路徑"/"添加一個路由，因為它丟失了。

例子：

const joinedSignupRoutes = `/(${allSteps
  .map((step) => step.path.substr(1))
  .join('|')})`;

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
      <Routes>
        <Route path="/" element={<h1>Home</h1>} /> // <-- replace with actual component
        <Route path={joinedSignupRoutes} element={<RegistrationRoutes />} />
      </Routes>
    </ConnectedRouter>
  );
};

更新

...而不是<Route path="/" element={<h1>Home</h1>} />作為登陸頁面我想要<Route path={joinedSignupRoutes} element={<RegistrationRoutes />} /> 。 即App運行時第一個看到的頁面應該是RegistrationRoutes組件。

您仍然需要在路徑"/"上渲染路由以維護react-router-dom@6強制執行的不變量，但您可以在該路由上渲染任何內容。 在這種情況下，您可以呈現重定向到您的joinedSignupRoutes路由。

例子：

import { ...., Navigate } from 'react-router-dom';

const joinedSignupRoutes = `/(${allSteps
  .map((step) => step.path.substr(1))
  .join('|')})`;

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
      <Routes>
        <Route
          path="/"
          element={<Navigate to={joinedSignupRoutes} replace />} 
        />
        <Route path={joinedSignupRoutes} element={<RegistrationRoutes />} />
      </Routes>
    </ConnectedRouter>
  );
};

更新 2

 // Joins all signup paths to a singel route to multimatch it against. // eg. path="/(step-1|step-2|step-3)" const joinedSignupRoutes = `/(${allSteps.map((step) => step.path.substr(1)).join("|")})`;

react-router-dom@5路由可以采用使用正則表達式的path道具。 在react-router-dom@6中不是這種情況。

請參閱正則表達式路由路徑發生了什么？

正則表達式路由路徑被刪除有兩個原因：

1. 路由中的正則表達式路徑對 v6 的排名路由匹配提出了很多問題。 您如何對正則表達式進行排名？

2. 我們能夠擺脫整個依賴關系（正則表達式路徑）並顯着減少發送到用戶瀏覽器的 package 權重。 如果加回來，就代表了 React Router 頁面權重的 1/3！

在查看了很多用例之后，我們發現在沒有直接正則表達式路徑支持的情況下我們仍然可以滿足它們，因此我們做出權衡以顯着減小包大小並避免圍繞正則表達式路由排名的開放性問題。

大多數正則表達式路由一次只關注一個 URL 段，並做以下兩件事之一：

1. 匹配多個 static 值
2. 以某種方式驗證參數（是數字，不是數字等）

要在 v6 中處理此問題，您需要為每條路徑指定一個顯式路由。 從"/"重定向到"/step-1"

例子：

import { ...., Navigate } from 'react-router-dom';

const joinedSignupRoutes = `/(${allSteps
  .map((step) => step.path.substr(1))
  .join('|')})`;

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
      <Routes>
        <Route
          path="/"
          element={<Navigate to={allSteps[0]} replace />} 
        />
        {allSteps.map(path => (
          <Route
            key={path}
            path={path}
            element={<RegistrationRoutes />}
          />
        ))}
      </Routes>
    </ConnectedRouter>
  );
};