Routes

  • Instead ofSwitchComponent, does not match down
  • Used to packageRoute

Route

  • Must beRoutesThe component package
  • componentProperties intoelement
  • caseSensitivePath case sensitive property, default is not sensitive (access/about = /ABOUT)
  • index 与pathThe attribute is mutually exclusive and index represents the root of the current route
  • Can be used as a Layout component without writingelementProperty, written to be associated withOutletCombination of components (nested by)
        <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>

Copy the code

Navigate

  • Used instead ofRedirectcomponent
  • replaceAttribute jump mode"PUSH" | "REPLACE"
  • The jump occurs as soon as the component is rendered
        <Routes>
          <Route path='/home' element={<Home />} ></Route>
          <Route path='/about' element={<About />} caseSensitive={false} />
          <Route path=The '*' element={<Navigate to='/home' />} / >
        </Routes>

Copy the code

NavLink

  • className, the style name for custom activation can be a string or a function
  • endWhether child routes are highlighted when matched
  • caseSensitiveIndicates whether path matching is case sensitive

useRoutes

  • It is used to manage routing tables. Compared to V5, you may need to use some third-party libraries to implement routing config management, which is now shipped with V6
const routes = useRoutes([
    {
      path: '/home'.element: <Home />
    },
    {
      path: '/about'.element: <About />
    },
    {
      path: The '*'.element: <Navigate to='/home' />
    },
    {
      path: '/user'.children: [{index: true.element: <h1>user~</h1> // This is not nested because children are protected from their father, so there is no need to use an Outlet component}}]])Copy the code

Embedded routines by

  • Set routine by general is to cooperateOutletComponent similar to theVuetherouter-viewComponent that tells where child routes should be rendered
{
      path: '/home'.element: <Home />.// This is a nested routine
      children: [
        {
          path: 'message'.element: <Message />
        },
        {
          path: 'article'.element: <Article /><div style={{}} Use <Outlet/> in the Home component to render child routes.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>

Copy the code

Routing and the cords

  • Params preach (refsuseParams)
  • Parameter search (useSearchParams)
  • The state transfer (useLocation, get the v5 location object, state may be null if entered directly.

Programmatic navigation

  • useNavigate
const navigate = useNavigate()

navigate('detail3', {

state: {

id: *item*.id,

content: *item*.content,

title: *item*.title

}

})

<button *onClick*={() = > navigate(-1}>back</button> <button *onClick*={() = > navigate(1)} > go < / button > forwardCopy the code

Some other hooks

  • useInRouterContextCheck whether components are wrapped by the Router. You may need to check third-party components
  • useNavigationTypeReturns the user’s navigation type to the current page"POP" | "PUSH" | "REPLACE";
    • Pay attention toPOPOpen the routing component directly in the browser (refresh the page)
  • useOutletReturns a nested route in place of an Outlet component
  • useResolvedPathGiven a URL, parse out path, hash, search (location object)