I'm getting this warning in React app:
You rendered descendant <Routes (or called `useRoutes()`) at "/" (under <Route path="/">)
but the parent route path has no trailing "*". This means if you navigate deeper,
the parent won't match anymore and therefore the child routes will never render.
Please change the parent <Route path="/"> to <Route path="*">.
Here is my code:
<Router>
<Routes>
<Route exact path="/login" element={<Login />} />
<Route exact path="/" element={<AppBody />} >
<Route exact path="/add-edit-profile" element={<PageContent />} />
<Route exact path="/profile-list" element={<ProfileList />} />
</Route>
</Routes>
</Router>
AppBody.js:
<Sidebar/>
<div className='page-content'>
<Header />
</div>
<Routes>
<Route exact path="/add-edit-profile" element={<PageContent />} />
<Route exact path="/profile-list" element={<ProfileList />} />
</Routes>
What I've to change in my code to fix the warning?
It means that AppBody is rendering more deeply nested routes and the path needs to specify the wildcard * character to indicate it can match more generic/nested paths. react-router-dom route paths are always exactly matched, so if sub-routes are rendered the path needs to allow for them. Change path="/" to path="/*".
Since AppBody is rendering the routes and no Outlet for the nested Route components, they can be safely removed.
<Router>
<Routes>
<Route exact path="/login" element={<Login />} />
<Route exact path="/*" element={<AppBody />} > />
</Routes>
</Router>