React路由器dom找不到类似rest的url

Question

所以我的网站有文章，用户可以按位置研究文章。

我想在 url 上渲染找到的文章：/articles?location=:where，但我的路由器找不到路由，并将我重定向到not-found。

这是我的浏览器路由器

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<AboutUs />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/publish-article" element={<WriteArticle />} />
      <Route path="/search-article" element={<Search />} />
      <Route path="/articles/:id" element={<RenderArticle />} />
      <Route path="/articles?location=:where" element={<ArticlesFound />} />
      <Route path="/quizz" element={<Quizz />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/users/:username" element={<UserProfile />} />
      <Route path="/user-settings" element={<ProfileSettings />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>

有没有人知道我做错了什么？

Answer 1

您无需为 URL SearchParams 设置路由，只需将其提取到组件中即可

import { useSearchParams } from 'react-router-dom'
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("location");

至少在反应路由器 v6 中