「译」React Router v6 中非常实用的4个API

发表于 3年以前 | 总阅读数：1827 次

最新的React Router版本，照片来源：Codequs https://codequs.com/p/ryDkOfFHL

我热爱React！我在最新的项目中一直使用React的最新版本的API，发现与以前的版本有很多重要且很酷的差异。

以下4个API不仅能帮您提升工作效率，同时还可以改善您的代码结构。- Outlet

forwardRef
useRoutes
useLocation

不论您是React的初学者，还是已经对React了如指掌，相信以下内容都会给予您一定的帮助。 Outlet

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

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

function Users() {
  /* All <Route path> and <Link to> values in this
     component will automatically be "mounted" at the
     /users URL prefix since the <Users> element is only
     ever rendered when the URL matches /users/*
  */
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

上面是用于React项目中创建导航路径的标准代码，接下来让我们看下React Router V6的代码：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="/" element={<UsersIndex />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

      <Outlet />
    </div>
  );
}

上述代码中组件被用作占位符。在这种情况下，可使Users组件呈现为其子路径。因此，元素将根据当前位置呈现或者元素。

因此，可以在布局中使用此元素的最佳方法。您可以简单地创建多个布局，例如-Dashboard Layout（用于个人资料和成员页面）或Main Layout（用于登录和注销，基本上在用户未登录时）。最后，您可以根据其路线简单地注入所需的任何组件，而不必将每个路线组件包装在父布局组件中，例如：

<Route path="/" element={<DashboardLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
</Route>

UseRoutes

import {
  BrowserRouter,
  Link,
  Outlet,
  useRoutes
} from 'react-router-dom';

function App() {
  // The <BrowserRouter> element is removed from App because the
  // useRoutes hook needs to be in the context of a <BrowserRouter>
  // element. This is a common pattern with React Router apps that
  // are rendered in different environments. To render an <App>,
  // you'll need to wrap it in your own <BrowserRouter> element.
  let element = useRoutes([
    // A route object has the same properties as a <Route>
    // element. The `children` is just an array of child routes.
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

  return element;
}

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

      <Outlet />
    </div>
  );
}

React Router v6 中新增了一个很棒的路由API，该API可以使用普通的JavaScript对象声明您的路由。实际上，如果您查看源码，您会发现它实际上只是一个小钩子，它是路由匹配算法的核心：useRoutes。

useRoutes钩子，设计的非常精巧，可以让您声明和使用撰写正常的JavaScript对象，而不是React元素。继续上面的案例，让我们看下它的实现。

该useRoutes钩子，接受一个JavaScript对象（可能是嵌套的）数组，这些JavaScript对象表示应用程序中的可用路由。每个路由都有一个path、element和children，这只是另外一组路由。

这个嵌套的JavaScript对象数组使代码保持DRY并提高了代码的可读性。如果您在v5版本中使用 react-router-config，则基于对象的路由配置可能看起来非常熟悉。在v6版本中，此配置格式已经提升为核心的API，并且该react-router-config软件包将被弃用。此外，Outlet部分中的代码示例可以简化为：

let element = useRoutes([
    {
      path: '/',
      element: <DashboardLayout/>,
      children: [
        { path: '/', element: <HomePage/> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

forwardRef

Ref forwarding 是一种很酷的技术，用于将ref自动通过组件传递给其子组件之一。它为子组件提供对由其父组件创建的DOM元素的引用。然后，这使孩子可以在任何正在使用的位置读取和修改该元素。

在我向您展示如何“forward”参考之前，首先要了解它们是什么以及如何创建它们。

创建 refs

要创建refs，请使用称为的React函数React.createRef()。然后可以通过ref属性将这些ref附加到React元素。引用与状态有些相似。在将引用分配给该组件的实例属性时，我们可以确保可以在组件中的任何位置引用它们。检查以下示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.newRef = React.createRef(); //newRef is now available for use throughout our component
  }
 ...
}
class MyComponent extends React.Component {
 ...
  render() {
    return <div ref={this.myRef} />;
  }
}

在这里，我创建了一个称为newRef 的ref，并将其附加到MyComponent组件中的div元素上。结果，我现在可以在不更改状态的情况下更新div。

这是使用ref的重要性，因为您可以更新和修改元素而无需使用导致组件重新呈现的状态变量。

直接来自文档的几点重要意义：

当在HTML元素上使用ref属性时，在构造函数中创建的ref会将React.createRef()基础DOM元素作为其current属性接收
在自定义类组件上使用ref属性时，ref对象将接收该组件的已安装实例作为其实例，current即组件的属性，状态和方法

从官方的React文档中可以看到，有一些很好的引用用例：

管理焦点、文本选择或者媒体播放

假设您有一个输入组件。在应用程序的某些部分中，当用户单击按钮时，您可能希望光标对准它。仅修改输入组件的特定实例而不更改状态（通过ref），而不是更改状态（通过props）会更有意义，因为这将导致组件每次都重新渲染。同样，您可以使用ref来控制音乐或视频播放器的状态（暂停，播放，停止），而无需在单击按钮（更改状态）时重新渲染它们。

递增递减计数

考虑一个中号拍手按钮。一种实现类似功能的快速方法是，每当用户单击拍手时，增加存储在状态中的计数值。但是，这可能不是很有效。每当用户单击拍手按钮时，它将重新呈现，并且如果您正在发送网络请求以将值存储在服务器中，则它将被发送与单击按钮一样多的次数。使用refs，您可以定位到特定节点并在用户每次单击按钮时增加该节点，而不会导致重新渲染，最后，您可以将最终值发送给我们的服务器一个请求。

触发命令式动画

您可以使用refs在依赖于自身的下一个状态但存在于不同组件中的元素之间触发动画（此概念称为ref forward）。引用还可用于简化与第三方DOM库的集成以及管理多步表单值状态等。

现在让我们转向引用ref技术：

forward ref 是一种自动将引用通过组件传递到其子组件的技术。在构建可重用的组件库时，引用转发非常有用。forwardRef是用于将ref传递给子组件的函数。让我们看看下面的例子：

function SampleButton(props) {
  return (
    <button className="button">
      {props.children}
    </button>
  );
}

该SampleButton()组件是经过修改的按钮，将以与常规DOM按钮类似的方式在整个应用程序中使用，因此对于管理与之相关的焦点，选择或动画，可能不可避免地需要访问其DOM节点。

在下面的示例中，SampleComponent()用于React.forwardRef获取传递给它的ref，然后将其转发到它呈现的DOM按钮：

const SampleButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="button">
    {props.children}
  </button>
));
const ref = React.createRef();
<SampleButton ref={ref}>Click me!</SampleButton>;

现在，我已经用方法包装了SampleButton组件forwardRef，使用该组件的组件可以获取对底层按钮DOM节点的引用，并在必要时进行访问-就像它们直接使用DOM按钮一样。

这是上面代码的澄清：