react route click does not jump

react version: 18.2.0

react-router-dom version: 6.16.0

Problem Description:

In the background management system, after configuring the routing, click the menu bar to jump to the routing. After the jump, the menu bar and the header and bottom area will not be displayed.

Solution

The warning means that the parent routing path does not have a trailing "*". This means that if you navigate deeper, the parent router will no longer match, so the child router will never be rendered.

Just add the following to the outermost place where routing is used:

<Routes>

        <Route path='/admin/*' element={<Admin/>} />

        <Route path='/login' element={<Login/>} />

        <Route path='/*' element={<Admin/>} />

      </Routes>

in addition

When configuring routes, functional components pass

import route from ‘../routes’

const element=useRoutes(route)

Then write where you need to display the route

<div>{element}</div>