0


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


本文转载自: https://blog.csdn.net/qq_37440870/article/details/126635460
版权归原作者 前端~浅海鱼 所有, 如有侵权,请联系我们删除。

“React Router v6中的更新”的评论:

还没有评论