react-router-dom V6

• 相较于V5版本，移除了<Redirect/>和<Switch/>
• 所有的路由规则的匹配放在<Routes/>中，单条路由的匹配放在<Route/>中
• 路由匹配成功后不再基于component/render控制渲染的组件，而是基于element，语法格式是<Component/>
• 默认就是一个路由匹配成功，就不再匹配下面的了（不再需要<Switch/>）
• 默认每一项都是精准匹配（不再需要exact）
• 如果要实现重定向，需要使用组件<Navigate/>，遇到就实现跳转，跳转到to指定的地址，给<Navigate/>设置replace 属性，则不会新增立即记录，而是替换现有记录

	<Navigate replace={true} to="/a/a1" />

• 如果以上都不匹配，用星号

            <Routes>
                <Route path="/" element={<Navigate to="/a" />} />
                <Route path="/a" element={<A />}>
{/* v6版本中，要求所有的路由(二级或者多级路由)，不在分散到各个组件中编写，而是统一都写在一起进行处理！！ */}
                    <Route path="/a" element={<Navigate to="/a/a1" />} />
                    <Route path="/a/a1" element={<A1 />} />
                    <Route path="/a/a2" element={<A2 />} />
                    <Route path="/a/a3" element={<A3 />} />
                </Route>
                <Route path="/b" element={<B />} />
                <Route path="/c/:id?/:name?" element={<C />} />
{/* 如果以上都不匹配，我们可以渲染404组件，也可以重定向到A组件「传递不同的问号参数信息」 */}
                <Route path="*" element={<Navigate to={{
                    pathname: '/a',
                    search: '?from=404'
                }} />} />
            </Routes>

加上index就是默认渲染的组件，但是index属性有很多弊端，如果有子路由不能设置这个属性，也不能给子路由设置这个属性，因此尽量少用，用重定向方式

<Route index path="/a" element={<A />}>

V6中所有的路由规则都写在一起，不用分散到各个组件中编写，统一写在一起进行处理，二级路由写在一级路由的标签内部

  {/* Outlet：路由容器，用来渲染二级(多级)路由匹配的内容 */}
  <Outlet />

<Outlet />嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

• V6中<HashRouter/>包裹的组件，即使是基于<Route/>渲染的，也无法通过props获取history，location，match等属性，想获取相关信息只能通过Hooks
• 没有用<HashRouter/>包裹的组件，不能使用Hooks，<HashRouter/>包裹的组件，不管是不是基于<Route/>渲染的，都可以通过Hooks获取相关信息

V6中实现路由跳转的方式

• 点击跳转<Link>和<NavLink>

	<Link to="/a/a1">A1</Link>

• 组件遇到就跳转路由

	<Navigate to="/a" />

• 编程式导航

V6中取消了history对象，基于navigate函数实现路由跳转
类组件需要使用高阶组件包裹，手动实现withRoute函数

	 import { useNavigate } from 'react-router-dom';
     const navigate = useNavigate();
     navigate('/c');
     navigate('/c', { replace: true });
     navigate({
        pathname: '/c'
     });
     navigate({
        pathname: '/c',
        search: '?id=100&name=zhufeng'
     });

路由跳转过程中的传参方案

• 问号传参

问号传参会在路径中，刷新时信息不会丢失

	import qs from 'qs';
	navigate({
	            pathname:'/c',
	            search:qs.stringfy({
	                id:100,
	                name:'zhufeng'
	            })
	        })

• 路径传参

 	navigate(`/c/100/zhufeng`); 

• 隐式传参

通过state完成

	navigate('/c', {
	            //历史记录池替换现有地址
	            replace: true,
	            //隐式传参信息
	            state: {
	                id: 100,
	                name: 'zhufeng'
	            }
	        });

获取传递的参数

常用的Hooks

• useLocation 「5中也有」：获取location对象信息 pathname/search/state….
• useSearchParams「新增的」：获取问号传参信息，取到的结果是一个URLSearchParams对象
• useParams「5中也有」：获取路径参数匹配的信息

	//获取问号传参信息
    const location = useLocation();
    // location.search:"?id=100&name=zhufeng"
    const usp = new URLSearchParams(location.search);
    console.log(usp.get('id'), usp.get('name')); 
    //获取问号传参信息
	//useSearchParams返回结果是一个数组
    //数组第一项是URLParamsSearch对象 第二个参数是修改的方法
    let [usp] = useSearchParams();
    console.log(usp.get('id'), usp.get('name'));
    */
	//获取路径参数信息
    const params = useParams();
    console.log(params); //=>{id:100,name:'zhufeng'} */
    //获取隐式传参信息
    const location = useLocation();
    console.log(location.state);