React Router v6中的更新

标题react-router v6 中的更新

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

1.Switch 重命名为 Routes

​ Routes 是以前Switch组件的升级版，它包括相对路由和链接、自动路由排名、嵌套路由和布局等功能

2.Route新特性

​ 负责渲染React组件的UI，其中的path属性，始终与当前url匹配，第二个需要的属性叫做 element，当遇到当前url是，会告诉Route组件要渲染哪个React组件，这里的element是v6新增的，替换v5中的component的属性

import Children from './Children';
// v5
<Route path=":id" component={Children} />
<Route
  path=":id"
  render={routeProps => (
    <Profile routeProps={routeProps} />
  )}
/>
// v6
<Route path=":userId" element={<Profile />} />

3.路由嵌套更简单，新增API：Outlet

​ 这个很重要，当路由被嵌套时，一般认为网页的某一部分保持不变，只有网页的子部分发生变化

​ v5 中，必须明确定义嵌套路由，v6中并非如此，他从React Router库中挑选了一个名为 Outlet 的最佳元素，为特定路由呈现任何匹配的子元素

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="new" element={<New/>}>
          <Route path=":id" element={<List/>} />
          <Route path="me" element={<Others/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function New() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet/>
    </div>
  )
}

4.useNavigate

​ useNavigate代替useHistory，useNavigae中不在保存useHistory中的路由信息，获取路由信息通过useLocation

// v5
history.push('/new')
history.replace('/new')
history.go(-1)

// v6
navigate('/new')
navigate('/new', {replace: true})
navigate(-1)

5.useRoutes

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <List />,
      children: [
        { path: ':id', element: <List /> },
        { path: 'new', element: <New /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}

6.v6中所有路径匹配都忽略URL尾部的’/'，Route 中的strict 在v6中已被删除

// v5 之前存在的路由歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/me'>
2.当前路径'/users/'，则<Link to='me'>将跳转<a href='/users/me'>

// v6修复了这种歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/users/me'>
2.当前路径'/users'，则<Link to='../me'>将跳转<a href='/me'>

// 像命令行中cd的用法
当前路径为 /app/dashboard
<Link to='stats'>			// <a href='/app/dashboard/stats'>
<Link to='../stats'>		// <a href='/dashboard/stats'>
<Link to='../stats'>		// <a href='/stats'>
<Link to='../../../stats'>		// <a href='/stats'>

7.保留了v5中的useParams和useLocation

8.v6中没有withRouter，但是在类组件中很多情况下会用到

const withRouter = Component => {
  const ComponentWithRouterProp = props => {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{location, navigate, params}}
      />
    );
  };

  return ComponentWithRouterProp;
};

9.大小，从20.5KB减少到7.4KB