URL 帶空格字符渲染未找到組件

Question

帶有空格字符的 URL 過去可以正常工作。 他們停止使用 React Router 版本 6。有人遇到過這個問題嗎？ 我該如何修復它？

URL 是根據 JSON 文件中的數據動態創建的。

這是一個代碼示例

<Routes>
    <Route path="/working" element={<Working />} />
    <Route path="/an example" element={<Example />} />
    <Route path="*" element={<NotFound />} />
<Routes>

Answer 1

為什么你的路由路徑中有空格？ 我想如果你必須擁有它們，你可以 URL 對它們進行編碼，即"/an%20example" 。

例子：

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/an example">an example</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/working" element={<Working />} />
        <Route path={encodeURI("/an example")} element={<Example />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}