React Router 6.x

(1)、Component

1. <BrowserRouter>
2. <HashRouter>
3. <Routes>
4. <Navilink>
5. <Navigate />
6. <Outlet/>

 1)    <BrowserRouter> 用于包裹整个应用

            <BrowserRouter>

                <App />

            </BrowserRouter>

  2） <HashRouter> 地址带#，作用跟BrowserRouter一样，但<HashRouter>修改的是地址栏的

            hash值。<BrowserRouter>与<HashRouter> v6版本与v5版本用法一样

  3)    V6移除<Switch> 引入新的替代者<Routes>

           <Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route>使用

           <Route>相当于一个if语句，如果其路径与之前的URL匹配，则呈现出对应的组件

           <Routes caseSensitive>属性用于指定：匹配时是否区分大小写（默认为false）

           当URL发生改变时，<Routes>会查看其所有子<Route>元素以找到最佳匹配并呈现组件

           <Route>也可以嵌套使用，且配置useRouter()配置路由表，但需要通过<Outlet/>组件来渲染

            其子组件

 <Routes> 
                {routers.map((item, index) => {
                    return (
                    <Route
                        key={index}
                        exact
                        path={item.path}
                        element={<item.component />} // 不是老版本的：component 或 render
                    />
                    // exact 开启路由严格匹配
                    );
                })}
            </Routes>

4） <Navilink></Navilink>、<Link/> 导航组件

 v6 中<Navilink>可实现导航高亮，默认类名是active，但className无效，自定义样式需如下：
     <Navilink to='login' 
            className={
               ({isActive})=>{
                   return isActive ? 'base one' : 'base'}
     >login</Navilink>

    默认情况下，当Home组件的子组件匹配成功，Home导航也会高亮，当<Navilink></Navilink>

   添加end后则只是子组件高亮，Home不会高亮了<Navilink to='home' end> home </Navilink>

5)  只要<Navigate />组件被渲染，就会修改路径切换视图，replace属性用于控制跳转模式

（push或者replace）默认是push模式

 export default function Home() {
        const [sumResult,setSumResult] = useState(1)
             return (
                 <div>
                    <h3>这是Home的内容</h3>
                    {sumResult === 2 ?  <Navigate to='about' replace={true}/> : <h4>当前sumResult值为：{sumResult}</h4>}
                    <button onClick={()=>setSumResult(2)}>点我变成2</button>
                  </div>
             )
    }

6)  <Outlet/> 当路由产生嵌套时，渲染其对应的后续子路由

2、Hooks

1. useRoutes()

2. useNavigate()

3. useParams()

4. useSearchParams()

5. useLocation()

6. useMatch()

7. useMatch()

8. useNavigationType()

9. useOutlet()

10. useResolvedPath()

1)  useRoutes()根据路由表，动态创建<Routes>和<Route>

import routes from './router/router'
const element = useRoutes(routes)

 2) useNavigate()编程式路由导航，v6之后已经废弃withRouter，用useNavigate()获取路由信息

 import { useNavigate } from 'react-router-dom'
 let navigate  = useNavigate();
 const handleJump = ()=>{
       //第一种方式，传入数值前进后退，类似于5.x中的history.go()方法
       navigate(1)

       //第二种方式，指定具体的路径
       navigate('/login',{
           replace:false,
           state:{
           id:item.id,
           title:item.title,
           content:item.content
          }
        })
 }

3) useParams() 当前路由匹配的params参数，类似于5x中的match.params

import { useParams } from 'react-router-dom'
const { id, title, content } = useParams()

 4) useSearchParams() 用于读取和修改当前位置的URL中的查询字符串，返回值包括两个值

      的数组，分别为：当前的search参数，更改search参数的函数

import { useSearchParams ,useLocation} from 'react-router-dom'
const [search,setSearch] = useSearchParams()
const id = search.get('id')
const title = search.get('title')
const content = search.get('content')
<button onClick={()=>setSearch('id=008&title=哈哈&content=更新后得内容')}>
     点我更新一下search参数
</button>

5） useLocation() 获取当前位置的location信息，对标5.x中路由的location属性

cosnt obj = useLocation() 得到的obj对象
{
  hase: "",
  key: "werksd23kd",
  pathname: "/login",
  state: {a: 1, b: 2}
}

6) useMatch() 返回当前匹配信息，对标5.x中的match属性

<Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登录</NavLink>

export default function Login() {
    const match = useMatch('/login/:x/:y')
    console.log(match) //输出match对象
    //match对象内容如下：
    {
       params: {x: '1', y: '10'}
       pathname: "/LoGin/1/10"  
       pathnameBase: "/LoGin/1/10"
       pattern: {
               path: '/login/:x/:y', 
               caseSensitive: false, 
               end: false
        }
     }
}

7） useInRouterContext() 判断是否处于路由的上下文环境

8） useNavigationType() 返回当前的导航类型（用户是如何来到当前页面的）,返回值： POP、    PUSH、REPLACE。POP是指在浏览器中直接打开了这个路由组件（刷新页面）

 9)  useOutlet() 用来呈现当前组件中渲染的嵌套路由

     const result = useOutlet()

     console.log(result)

     // 如果嵌套路由没有挂载,则result为null

    // 如果嵌套路由已经挂载,则展示嵌套的路由对象

10)   useResolvedPath() 给定一个 URL值，解析其中的：path、search、hash值