<Link to='/xxxxx'>Demo</Link>//No highlight state switch
<NavLink to='/xxxxx'/>About</NavLink>//The middle tag element can be replaced by children in <NavLink>
<NavLink to='/xxxxx'/ children='About'>//The highlight state will be switched, and the default increase will add active after className
3. Write the Route
tag in the display area to match the path (the new version needs to be wrapped with Routes
and the imported components need to use element
, otherwise empty content will be displayed)
<Route path='/xxxx' component={Demo}/>//Old version V5
<Routes>
<Route path='/xxxx' element={Demo}/>//New version V6
</Routes>
The outermost part of the App is wrapped with a BrowserRouter
or HashRouter