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?

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?

• javascript
• reactjs
• react-router-dom

1 Answer 1

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>