Reactjs "No routes match location "/blabla"

Question

我想将页面的路由保留在单独的组件中并在 app.js 中呈现它们，但它给出了“没有路由匹配位置”警告。我正在查看我想要的页面，但警告始终存在。

App.js:

<div id="app">
 <BrowserRouter>
  <Routes>
   <HomeRoutes />
  </Routes>
 </BrowserRouter>
</div>

HomeRoutes.js

<>
 <Route path="/" element={<Home />} />
</>

Answer 1

试试这个：

exact 为 true 时，仅当路径与 location.pathname 完全匹配时才会匹配

<Route exact path="/" element={<Home />} />

Answer 2

我不确定为什么另一个回答说使用 exact 道具被接受为 react-router-dom@6 Route 组件没有 exact 道具。

Routes and Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
}

我在运行你的代码中看到的问题是 [HomeRoutes] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>.

只有 Route 或 React.Fragment 是 Routes 组件的有效子组件，只有 Routes 或另一个 Route 组件是 Route组件。

<BrowserRouter>
  <Routes>
    <Route path="/*" element={<HomeRoutes />} />
  </Routes>
</BrowserRouter>

HomeRoutes - 路由被渲染到 Routes 组件中

<Routes>
  <Route path="/" element={<Home />} />
</Routes>

Reactjs "No routes match location "/blabla"

Reactjs "No routes match location "/blabla"

reactjs

react-router

react-router-dom