目 录CONTENT

文章目录

react-router_6新特性

Administrator
2021-11-27 / 0 评论 / 0 点赞 / 5352 阅读 / 10170 字

react-router-dom 6新特性

前言

react-router-dom v6的具体内容可以在react-router-dom文档上查看,但是是英文版,英语水平不好的同学可以在网上找大佬的翻译。
本人在公司搭了一个简单的后台管理系统的模板,今天想升级一下依赖,随便研究了一下react-router-dom6.x版的使用。总的来说,变化不是特别大。现在我把常用的几个变动总结一下,供大家参考:

  1. <Switch>重命名为<Routes>
  2. <Route>的新特性变更。
  3. 嵌套路由变得更简单。
  4. useNavigate代替useHistory
  5. 新钩子useRoutes代替react-router-config
  6. 大小减少:从20kb8kb

<Switch>重命名为<Routes>

该顶级组件将被重命名。但是,其功能大部分保持不变(嗨,瞎折腾)。

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

<Route>的新特性变更

component/renderelement替代

总而言之,简而言之。就是变得更好用了。

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

嵌套路由变得更简单

具体变化有以下:

  • <Route children> 已更改为接受子路由。
  • <Route exact><Route strict>更简单的匹配规则。
  • <Route path> 路径层次更清晰。

简化嵌套路由定义

v5中的嵌套路由必须非常明确定义,且要求在这些组件中包含许多字符串匹配逻辑(活久见啊,终于意识到这个问题了。)

且看之前的处理:

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}

而在v6中,你可以删除字符串匹配逻辑。不需要任何useRouteMatch()

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

当然,还有更酸爽的操作,直接在路由里定义<Route><Route>,然后用接下来的一个新APIOutlet

API:Outlet

<Outlet />组件是一个视图窗口,单单这么讲比较抽象。他其实就是当你使用嵌套路由的时候,子组件的渲染窗口。用过Vue的人都知道,vue的router是有嵌套路由的,但是react在v6之前都没有一个比较简单方便的路由,他的嵌套路由实现是用组件套路由方式实现。现在有了嵌套路由后就方便很多,跟vue的路由一样,使用起来得心应手,也比较符合逻辑。<Outlet />就提供了在父页面的路由的一个子页面渲染窗口,也就是说,当路由找到子页面后,会通过<Outlet />渲染到页面上。

// v6 之前
<BrowserRouter>
    <Switch>
    	// Layout中写子路由
      <Route path='/' component = {Layout} />
    </Switch>
    // 或者这样写
    <Switch>
      <Layout>
        <Switch>
           ...子路由
        </Switch>
	  </Layout>	
    </Switch>
  </BrowserRouter>

// v6
 <BrowserRouter>
    <Routes>
      <Route path='/' element={<Layout><Outlet /></Layout>} >
        <Route path='index' element={<Home />} />
        <Route path='manager'>
            <Route path='userManager' element={<UserManager />} />
        </Route> 
      </Route>
    </Routes>
  </BrowserRouter>
  
// 你也可以将route抽离
interface IRouteProps extends RouteProps{
  children?: IRouteProps[]
}

const route:IRouteProps[] = [
  {path: 'index', element: <Home />},
  {
    path: 'examples', element: <Outlet />,
    children: [
      {path: 'i18n', element: <I18n />},
      {path: 'request', element: <Request />},
      {path: 'dataflow', element: <DataFlow />},
      {
        path: 'admin', element: <Outlet />,
        children: [
          {path: 'manager', element: <Manager />}
        ]
      },
    ]},
];

const routerRender = (routes:IRouteProps[]) => {
  return routes?.map((item, index) => {
    return <Route
      key={index}
      path={item.path}
      element={item.element}>
      {item.children ? routerRender(item.children) : null}
    </Route>;
  });
};

多个<Routes />

以前,我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由,这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';
import { Routes, Route } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

useNavigate代替useHistory

从一目了然改到双目失明。。。

总感觉React Router团队有点儿戏。。。

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

现在,history.push()将替换为navigation()

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

history的用法也将被替换成:

// v5
history.push('/home
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});

新钩子useRoutes代替react-router-config

感觉又是一波强行hooks,但还是相对于之前简洁了一些

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

大小减少:从20kb8kb

React Router v6给我们带来方便的同时,还把包减少了一半以上的体积

img

迁移及其它重要修复

其实上面所列的新特性,基本就是迁移的全部内容了。

基础的起手式就是更新包:

$ npm install react-router@6 react-router-dom@6
# or, for a React Native app
$ npm install react-router@6 react-router-native@6

其中我觉得特别需要注意的一点是:React Router v6使用简化的路径格,仅支持2种占位符:动态:id样式参数和\*通配符

以下都是v6中的有效路由路径:

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*
/files-*

使用RegExp正则匹配的路径将无效:

/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg

v6中的所有路径匹配都将忽略URL上的尾部"/"。实际上,已被删除并且在v6中无效。这并不意味着您不需要使用斜杠。

在v5版本之前的路径,存在路由歧义

  1. 当前路径:"/users",则<Link to="me">将跳转<a href="/me">
  2. 当前路径:"/users/",则<Link to="me">将跳转<a href="/users/me">

React Router v6修复了这种歧义,取消了尾部"/":

  1. 当前路径:"/users",则<Link to="me">将跳转<a href="/users/me">
  2. 当前路径:"/users",则<Link to="../me">将跳转<a href="/me">
0

评论区