Reactjs "No routes match location "/blabla"

Question

I want to keep the routes of the pages in separate components and render them in app.js, but it gives a "No routes match location" warning. I'm viewing the page I want but the warning is always there.

App.js:

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

HomeRoutes.js

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

Answer 1

Try this:

exact when true, will only match if the path matches the location.pathname exactly

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

Answer 2

I'm uncertain why an other answer saying to use an exact prop was accepted as react-router-dom@6 Route components have no exact prop.

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;
}

The issue I see when running your code is that [HomeRoutes] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>.

Only Route or React.Fragment are valid children of the Routes component, and only Routes or another Route component are valid parents of a Route component.

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

HomeRoutes - routes are rendered into a Routes component

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