react 路由 V6新特性总结

1、Switch 单一匹配 变为Routes

2、component / render 变为 element

3、默认显示路由添加index属性，默认为true

4、Redirect 组件取消 变为 Navigate

5、使用useNavigate替代了useHistory

使用useNavigate替代了useHistory用来跳转路由并能传递参数

6、v6移出了WithRouter，添加了一些新的hooks

因为v6移出了WithRouter，所以组件的props不能直接拿到history，location，match；所以v6在v5的基础上添加了一些新的hooks便于我们对于路由值传递（useParams,useLocation,useSearchParams）

1、通过search与state传递的参数我们可以通过useLocation()对象中获取；
  const {state，search} = useLocation()
2、search传递的参数是最后接收的结果是查询字符串?id=xx&name=xxx；可以通过useSearchParams()中的方法来获取其search参数值；
  import { useSearchParams} from 'react-router-dom'
  const [searchParams, setSearchParams] = useSearchParams();
  console.log('searchParams',searchParams.get("id"))
  
3、通过params动态路由的方式传递的参数，使用useParams()可以获取，其直接是个对象;
 const {xxx} = useParams()

7、使用useRoutes替代了v5的react-router-config

创建一个router文件，导出配置路由表

创建路由映射表
export default [
  {
    path: '/',
    element: <Navigate to="/login" />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/main/:hjg',
    element: <Main />,
    children: [
      {
        index: true,
        element: <Navigate to="default" />
      },
      {
        path: 'default',
        element: <MainDefault />
      },
      {
        path: 'docmanage',
        element: <DocManage />,
      },
      {
        path: 'docteam',
        element: <DocTeam />
      },
      {
        path: 'join',
        element: <Join />
      }
    ]
  },
  {
    path: '*',
    element: <Page404 />
  },
]

import React from "react";
import {useRoutes} from "react-router-dom"
import routes from './router' //引入路由表

import './App.css'
function App() {
  const element = useRoutes(routes) //使用useRoutes()生成 }>结构
  return (
    <>
      {element}//使用路由表
    </>
  );
}

export default App;

8、导出了Outlet组件，类似于vue的router-view

子路由的显示位置,配合Link与NavLink显示子路由页面位置

    <>
      <Title level={4}>家庭医生管理</Title>
      <ul>
        <li><NavLink
          to="/main/docmanage/add"
          activeClassName='active'
          isActive={(match, location) => {
            console.log(match, location)
            if (match.url ||match === null) {
              return true
            }
          }}
        >增加</NavLink></li>
        <li><NavLink to="/main/docmanage/del" activeStyle={{ backgroundColor: 'pink', color: 'white' }}>删除</NavLink></li>
        <li><NavLink to="/main/docmanage/look">查看</NavLink></li>
        <li><NavLink to="/main/docmanage/modify">修改</NavLink></li>
      </ul>
      {/* 三级路由 */}
      <Outlet></Outlet>
    </>

9、大小从20kb减小到8kb