【React Router v6】这17个API，你真的都懂了吗？(建议收藏)

    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
      <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
      </React.StrictMode>,
    );

    <Routes>
      // path属性用于定义路径，element属性用于定义当前路径所对应的组件
      <Route path='/login' element={<Login />} />
    
      // 用于定义嵌套路由，home是一级路由，对应的路径/home*/
      <Route path='/home' element={<Home />} >
    // test1和test2是二级路由，对应的路径是/home/test1 或 /home/test2
    <Route path='test1' element={<Test1 /> />
    <Route path='test2' element={<test2 />} />
      </Route>
      
      // Route也可以不写element属性，这时就是用于展示嵌套路由，对应的路径是/users/xxx
    	<Route path="users">
    <Route path='xxx' element={<Demo />} />
      </Route>
    </Routes>

    import { Link } from 'react-router-dom'

    
    function Test() {
    	return (
    		<div>
    			<Link to='/路径'>按钮</Link>
    		</div>
    	)
    }

    // 注意：NavLink默认类名是active，下面是自定义的class

    
    // 自定义样式
    <NavLink
      to='login'
    	className={({ isActive }) => {
    console.log('home',isActive)
    return isActive ? 'base one' : 'base'
      }}
     >login</NavLink>
    /* 
    	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮,
    	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
    */
    <NavLink to='home' end>Home</NavLink>

    import React, { useState } from 'react'
    import { Navigate } from 'react-router-dom'
    
    export default function Home() {
      const [sum, setSum] = useState(1)
      return (
    <div>
      <h3>我是Home的内容</h3>
      {sum === 2 ? <Navigate to="/about" replace /> : <h4>当前sum的值是：{sum}</h4>}
      <button onClick={() => { setSum(2) }}>点我sum变为2</button>
    </div>
      )
    }

    // 根据路由表生成对应的路由规则

    const element = useRoutes([
    	{
    		path:'/about',
    		element: <About />
    	},
      {
    path: '/home',
    element: <Home />,
    children: [
    	{
    		path: 'news',
    		element: <News />
      		}
    ]
      }
    ])
    
    // Home.jsx
    import React from 'react';
    import { Outlet } from 'react-router-dom';
    
    export default function Home() {
      return(
      	<div>
    	{/* 指定路由组件呈现的位置 */}
    	<Outlet />
    </div>
      )
    }

    // 路由表配置：/src/routes/index.js
    import Home from '../pages/home'
    export default [
      {
    path: '/home',
    element: <Home />
      }
    ]
    // App组件
    import React from 'react';
    import { useRoutes,Link } from 'react-router-dom';
    import routes from './routes'
    function App() {
      const element = useRoutes(routes)
      return (
      	<div>
    	{/* 编写路由链接 */}
    	<Link to="/home">Home</Link>
      		{/* 注册路由 */}
    	{element}
    </div>
      )
    }

    import { useNavigate } from 'react-router-dom';
    export default function Demo() {
    	const navigate = useNavigate()
      const handle = () => {
    // 第一种使用方式：制定具体路径
    navigate('/login',{
      replace: false,
      state: { a:1, b:2 }
    })
    // 第二种使用方式： 传入number类型数值进行前进和后退，类似router v5中的history.go()方法
    navigate(-1) //后退
      	navigate(1) // 前进
      }
      return (
      	<div>
    	<button onClick={handle}>按钮</button>
    </div>
      )
    }

>     const [search,setSearch] = useSearchParams()
>  
>  
>       
>  
>

    <BrowserRouter>
      <App />
    </BrowserRouter>

    import { useInRouterContext } from 'react-router-dom';
    console.log(useInRouterContext())
    若组件处于路由的上下文环境中（比如上面的App组件）
    则这个控制台输出为：true。
    //
    若组件不处于路由的上下文环境中，
    则控制台输出为：false。

    import { useNavigationType } from 'react-router-dom';
    console.log(useNavigationType());

    import { useOutlet } from 'react-router-dom';

    const result = useOutlet()
    console.log(result)
    
    // 如果嵌套路由没有挂载，则result为null；
    // 如果嵌套路由已经挂载，则展示嵌套的路由对象

    import { useResolvedPath } from 'react-router-dom'
    console.log(useResolvedPath('/users?id=001&name=tom#qwe'))

    { pathname: '/users', search: '?id=001&name=tom', hash: '#qwe' }