反應錯誤：沒有路由匹配位置“/”

Question

我的 React 應用程序給我錯誤No routes matched location "/"

我的 App.js 看起來像：

import Form from './components/Form';
import NavMenu from './components/NavMenu';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {

  // Irrelevant code
  
  return (
    <Router>
      <div>
        <NavMenu />
        <Routes>
          <Route path="/:nav_string" element={<Form />}></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App; 

任何想法為什么會這樣？

我擺脫了錯誤，盡管這不是一個干凈的解決方案。 我創建了一個新組件 Home.js，將其添加到 App.js 中，路徑為“/”：

return (
  <Router>
    <div className="content">
      <NavMenu response={response}/>
      <Routes>
        <Route path="/" element={<Home />}></Route> // Added home element
        <Route path="/:nav_string" element={<Form response={response} />}></Route>
      </Routes>
    </div>
  </Router>
);

雖然我不是這個解決方案的忠實粉絲，因為 Home.js 返回 null。 我只是創建它來擺脫這個警告。 如果某人實際上不需要路徑匹配 / 的路由，他們可以做什么？

Answer 1

如果你真的不需要在"/"路徑上呈現任何東西，你可以呈現一個重定向到表單的路由，也許有一些默認值。

例子：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="/" element={<Navigate to="/someDefaultValue" replace />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

另一種方法是在兩條路由上都呈現Form組件。 RRD 經過優化，使得在路由之間導航或nav_string參數值更改時， Form組件保持掛載狀態。

例子：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="/" element={<Form response={response} />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

只需確保Form可以處理可能未定義的nav_string參數值。 您可以提供后備值。

const { nav_string = "someDefaultValue" } = useParams();

然后總是有“捕獲所有”路由，您可以在其中為任何“未處理”路由呈現一些后備 UI。 這將包括"/" 。

例子：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="*" element={<NotFound />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

Answer 2

可以添加404路由

當沒有路由匹配 url 時，將顯示找不到頁面

return (
  <Router>
    <div className="content">
      <NavMenu response={response}/>
      <Routes>
        <Route path="/:nav_string" element={<Form response={response} />}></Route>
        <Route path='*' element={<NotFound />} /> {/* You can change NotFound element*/}
      </Routes>
    </div>
  </Router>
);

Answer 3

"/:nav_string"的格式是一個路徑參數，沒有"/"路徑嘗試輸入例如"/Product" ，然后它解決了

Answer 4

這應該有助於：

<BrowserRouter>
 <NavMenu/>
   <Routes>
        <Route path="/" element={<Form/>}></Route>
   <Routes/>
<BrowserRouter/>