Routes
- Instead of Switch components, it will not match downwards
- Used to wrap Route
Route
- Must be wrapped in the Routes component
- The component property becomes element
- caseSensitive path case-sensitive property, default is insensitive (access /about = /ABOUT)
- index and path attributes are mutually exclusive, and index is represented as the root of the current route
- Can be used as a layout component, without writing element attributes, and should be used in conjunction with Outlet component (necked routing)
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />} caseSensitive={false} />
</Routes>
<Route path='/user'>
<Route index element={<h1>user~</h1>} />
</Route>Navigate
- Used instead of Redirect component
- replace attribute Jump mode "PUSH" | "REPLACE"
- As long as this component is rendered, it will jump
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />} caseSensitive={false} />
<Route path='*' element={<Navigate to='/home' />} />
</Routes>NavLink
- className, custom style name when activated can be a string or function
- end is highlighted when matching subroutine routes
- caseSensitive represents whether the path is case sensitive when matching
useRoutes
Used to manage routing tables, compared to v5, some third-party libraries may be required to implement routing config management. Now the v6 version comes with its own
const routes = useRoutes([
{
path: '/home',
element: <Home />
},
{
path: '/about',
element: <About />
},
{
path: '*',
element: <Navigate to='/home' />
},
{
path: '/user',
children: [
{
index: true,
element: <h1>user~</h1> // This is not a nested route. Children will prevent the father's position, so it does not need to be used with the Outlet component. }
]
}
])Nested routing
Nested routing is generally used with Outlet components. This component is similar to Vue's router-view component, telling the subroutine where it should be rendered.
{
path: '/home',
element: <Home />, // This is nested routing children: [
{
path: 'message',
element: <Message />
},
{
path: 'article',
element: <Article />
}
]
}Use <Outlet/> in Home component to render subroutines
<div style={{ marginTop: '48px' }}>
<div className='nav'>
<div className='nav-item'>
<NavLink to='/home/message'>message</NavLink>
</div>
<div className='nav-item'>
<NavLink to='/home/article'>article</NavLink>
</div>
<div style={{ marginTop: 36 }}>
<Outlet />
{/* {outlet} */}
</div>
</div>
</div>Routing parameters
- params transfer (useParams)
- Search parameter transfer (useSearchParams)
- State parameter (useLocation, obtain v5 version location object, if you enter it directly, state may be null)
Programming Navigation
useNavigate
const navigate = useNavigate()
navigate('detail3', {
state: {
id: *item*.id,
content: *item*.content,
title: *item*.title
}
})
<button *onClick*={() => navigate(-1)}>back</button> Return to the previous page
<button *onClick*={() => navigate(1)}>go</button> go aheadSome other hooks
- useInRouterContext determines whether the component is wrapped by Router. Some third-party components may need to be judged.
- useNavigationType Returns the navigation type of the user to the current page "POP" | "PUSH" | "REPLACE";
- Note POP means that this routing component is opened directly in the browser (refresh the page)
- useOutlet returns nested routes, which can replace Outlet component
- useResolvedPath Given a url, parse path, hash, search (location object)
This is the article about the introduction to the basic use of react-router-dom v6 version. For more related content on react-router-dom v6, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!