React Router 6

Router6

1. 一级路由改动

注册 Route 时必须要包裹 Routes
注册组件中的 component 改为 element

//旧版
<Route path={'/home'} component={Home} />
//新版
<Routes>
<Route path="/about" element={<About />} />
<Route path="/home" element={<Home />} />
</Routes>

2. 路由改重定向

Redirect 移除、改为 Navigate 注册到 Route 中

//旧版
<Redirect to="/about"/>
//新版
<Route path="/" element={<Navigate to='/home' >}/>

3. NavLink 高亮

className 中可以接受一个回调函数、点击时返回一个布尔值、可用于判断是否高亮

function computedClassName({isActive}){
return isActive?'list-group-item lhs':'list-group-item'
}

<NavLink className={computedClassName} to="/about">About</NavLink>

4. useRoutes 路由表

    1、定义路由文件生成路由规则
    import { Navigate } from 'react-router-dom'
    import About from '../pages/About'
    import Home from '../pages/Home'
    const routes = [
			    {
			    path: '/about',
			    element: <About />,
			    },
			    {
			    path: '/home',
			    element: <Home />,
			    },
			    {
			    path: '/',
			    element: <Navigate to="/home" />,
			    },
    ]
    export default routes

    2、根据路由表生成对应路由规则

    import { useRoutes } from 'react-router-dom'
    const elementRoutes=useRoutes(routes)

    3、注册路由
       <div className="panel-body">   
          { elementRoutes}   
       </div>

5. 嵌套路由

   1、在路由表中定义嵌套规则
    {
    path: '/home',
    element: <Home />,
    children:[
		    {
		    path: 'news',
		    element: <New />,
		    },
		    {
		    path: 'Message',
		    element: <Message />,
		    }
    ]
    },

    2、导入 <Outlet />指定路由组件呈现的位置
    <NavLink className='list-group-item' to="news">News</NavLink>

    {/_ 指定路由组件呈现的位置 _/}
    <Outlet />

6. 路由传参数

1. 指定路由规则
    {
    path: 'detail/:id/:title/:content',
    element: <Detail />,
    }

          2. 匹配路由参数、指定路由组件的展示位置
            <div>
                <ul>
                {message.map((p) => {
                return (
                   <li key={p.id}>
                 <Link to={`detail/${p.id}/${p.title}/${p.content}`}>{p.title}</Link>
                   </li>
                )
                })}
             </ul>
                <Outlet/>
             </div>

          3. 在组件中接收参数

            import React from 'react'
            import { useParams,useMatch } from 'react-router-dom'
            export default function Detail() {
            //获取路由参数
            const {id,title,content}=useParams()

            //match必须指定完整的路径
            const {params}=useMatch('/home/message/detail/:id/:title/:content')
            console.log(params)
            return (
                  <ul>
                  <li>消息编号{id}</li>
                  <li>消息标题{title}</li>
                  <li>消息内容{content}</li>
                  </ul>
            )
            }

7. 路由接收 serch 参数

1.  匹配路由参数、指定路由组件的展示位置
 <Link to={`detail?id=${p.id}&title=${p.title}&content=${p.content}`}>{p.title}</Link>

2.  接收serchc参数
    import { useSearchParams,useLocation} from 'react-router-dom'

     const  [search,setSearch]=useSearchParams()
       console.log(search.get('id'))
       console.log(search.get('title'))
       console.log(search.get('content'))

    //更新参数setSearch
<button onClick={()=>setSearch('id=999&title=李寒松&content=你好')}>更新serch参数</button>

8. 路由接收 state 参数

  1.  匹配路由参数、指定路由组件的展示位置
    <Link to='detail'
         state={ {
              id:p.id,
              title:p.title,
              content:p.content,
             } }>
             {p.title}
     </Link>

  2.  接收 serchc 参数
        import { useLocation } from 'react-router-dom'
        //连续解构
        const {state:{id,title,content}}=useLocation()

9. 编程式路由导航

withRouter 加工组件移除
借助 useNavigate 上的 API 对操作路由跳转、前进、后退
编程式导航可以携带 state 参数
navigate(-1)//前进
navigate(1)//后退

		import { useNavigate } from 'react-router-dom'
		
		const navigate = useNavigate()
		<button onClick={() => navigate('detail', {
				state: {
				id: p.id,
				title: p.title,
				content: p.content,
				}
		})} >
		查看详情
</button>

10. useInRouterContext

import { useInRouterContext } from 'react-router-dom'
//当组件被 BrowserRouter 包裹就处于路由的上下文环境中了
//useInRouterContext 返回布尔值
console.log('@',useInRouterContext( ))

11. useNavigationType()

1. 作用：返回当前的导航类型（用户是如何来到页面的）
2. 返回值：pop、push、replace
3. pop是指在浏览器中直接打开了这个路由组件（刷新页面 ）

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

12. useOutlet()

1. 作用：用于呈现当前组件中渲染的嵌套路由

  import { useOutlet } from 'react-router-dom'
  console.log(useOutlet());
  //如果嵌套路由没有挂载、useOutlet()返回null
  //如果嵌套路由已经挂载、则展示嵌套的路由对象

13. useResolvedPath()

1. 作用：给定一个URL值、解析其中的：path、search、hash值

 import { useResolvedPath } from 'react-router-dom'
 console.log(useResolvedPath('/user?id=001&name=丽丽#sdf'));