乐趣区

关于前端:React-Router-v6-使用指南

jiezi

本文首发于公众号《前端全栈开发者》，第一工夫浏览最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！

在本教程中，让咱们看一下如何应用 React Router v6 库创立路由。请留神，在撰写本文时，React Router v6 仍处于测试阶段。本教程将带你一窥该库行将推出的一些新性能。

如果你有在 React 应用程序中应用路由的教训，你可能曾经晓得在过来的几年里 Reach Router 曾经引起了肯定的关注，然而，它从版本 6 开始被合并回 React Router 库。这意味着 v6 版本比之前的版本有更小的包大小，这是 Reach Router 存在的次要起因之一。

先决条件

为了充分利用本教程，请确保你在本地开发环境中装置了以下内容。

  • Node.js 版本 >= 12.x.x
  • 软件包管理器，例如 npm 或 yarn 或 npx
  • JavaScript，React.js 和 React Hooks 的基础知识

入门

首先创立一个新的 React 利用。从终端窗口应用上面的命令生成我的项目目录，而后在我的项目目录内导航，装置所需的依赖项，增加 React Router v6 库。

npx create-react-app react-router-v6-example
cd react-router-v6-example
yarn add history react-router-dom@next

为了不便，我应用 codesandbox.io 作为演示，像这样的 Demo 代码举荐应用 codesandbox.io 这样在线的 IDE 工具

一旦装置了依赖关系，在你喜爱的代码编辑器中关上 package.json 文件，你会看到 react-router-dom 库的依赖版本。

“dependencies": {
  // 装置的其余依赖项
  "react-router-dom": "6.0.0-beta.0",
},

React Router 库中的不同软件包

React Router 库蕴含三个不同的 npm 包，以下每个包都有不同的用处。

  • react-router
  • react-router-dom
  • react-router-native

程序包 react-router 是外围库，用作下面列出的他两个程序包的对等依赖项。react-router-dom 是 React 利用中用于路由的软件包。列表中的最初一个包，react-router-native 有用于开发 React Native 利用的绑定。

当初咱们有了这些，让咱们建设第一个路由。

应用 React Router v6 创立第一个路由

要应用 React Router 库创立第一个路由，关上 src/App.js 文件，增加以下导入语句。

import {BrowserRouter as Router} from 'react-router-dom';

这是从 react-router-dom 库导入的第一个组件。它用于包装不同的路线，它应用 HTML5 history API 来跟踪 React 应用程序中的路由历史记录。

下面片段中的 Router 局部是别名，使编写起来更容易。倡议在 React 利用的组件层次结构中的顶级组件上导入和应用它：

function App() {return <Router>{/* 所有路由都嵌套在其中 */}</Router>;
}

从 react-router-dom 导入的下一个组件是新的 Routes：

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

这个新的元素是以前 Switch 组件的升级版，它包含绝对路由和链接、主动路由排名、嵌套路由和布局等性能。

所需的 react-router-dom 中的最初一个组件称为 Route，它负责渲染 React 组件的 UI。它有一个称为 path 的属性，该属性始终与应用程序的以后 URL 匹配。第二个须要的属性叫做 element，当遇到以后的 URL 时，会通知 Route 组件要渲染哪个 React 组件。这里的 element 键字也是新减少的，此前，在 React Router v5 中，你会应用名为 component 的属性。

为了在上面的演示中创立第一个路由，让咱们创立一个名为 Home 的根本函数组件，返回一些 JSX。

function Home() {
  return (<div style={{ padding: 20}}>
      <h2>Home View</h2>
      <p> 在 React 中应用 React Router v6 的指南 </p>
    </div>
  );
}

应用以下路由更新 App 函数组件。这里须要留神的 v6 库的另一个特点是，Route 组件的 element 属性当初容许你传递一个 React 组件，而不仅仅是该 React 组件的名称。这样就能够很不便的把属性传到路由上：

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

要查看它是否失常工作，请返回到终端窗口，并应用命令 yarn start 启动开发服务器。接下来，在浏览器窗口中拜访 URL http://localhost:3000。

这是此步骤之后的输入：

让咱们疾速创立另一个名为 About 的函数组件，只有当浏览器窗口中的 URL 为 http://localhost:3000/about 时才会出现。

function About() {
  return (<div style={{ padding: 20}}>
      <h2>About View</h2>
      <p> 在 React 中应用 React Router v6 的指南 </p>
    </div>
  );
}

而后，为 About 组件增加 Route：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

当初，返回浏览器窗口并拜访 URL http://localhost:3000/about：

增加导航菜单

为了在 React 应用程序内的特定路由或演示应用程序中现有的两个路由上导航，让咱们在 react-router-dom 的 Link 组件的帮忙下增加一个最小的导航栏。

首先从库中导入它：

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

在 HTML 中的不同网页之间导航的概念是应用锚点标记：

<a href="">Some Link Name</a>

在 React 应用程序中应用这种办法将导致在每次渲染新视图或页面自身时刷新 web 页面。为了防止刷新网页，react-router-dom 库提供了 Link 组件。

接下来，在 App 函数组件外部，创立一个导航栏，如代码片段所示：

<Router>
  <nav style={{margin: 10}}>
    <Link to="/" style={{padding: 5}}>
      Home
    </Link>
    <Link to="/about" style={{padding: 5}}>
      About
    </Link>
  </nav>
  {/* 其余代码放弃不变 */}
</Router>

到浏览器窗口，以查看正在运行的导航栏：

如何解决嵌套路由

嵌套路由是一个很重要的概念，须要了解。当路由被嵌套时，个别认为网页的某一部分放弃不变，只有网页的子局部发生变化。

例如，如果你拜访一个简略的博客，则始终显示该博客的题目，而后在其下方显示一个博客文章列表。然而，当你单击博客文章时，博客文章列表将替换为该特定博客文章的内容或形容。这是本节将要执行的示例，以理解如何在最新版本的 React Router 库中解决嵌套路由。

在 React Router v5 中，必须明确定义嵌套路由，React Router v6 并非如此。它从 React Router 库中筛选了一个名为 Outlet 的最佳元素，为特定路由出现任何匹配的子元素。首先，从 react-router-dom 库中导入 Outlet：

import {Outlet} from 'react-router-dom';

为了模拟根本博客，咱们在 App.js 文件中增加一些模仿数据。该代码段蕴含一个称为 BlogPosts 的对象，该对象进一步蕴含不同的对象作为属性。每个对象都由三局部组成：

  • 一个惟一的 ID
  • 文章的题目
  • 文章的形容 
const BlogPosts = {
  '1': {
    title: 'First Blog Post',
    description: 'Lorem ipsum dolor sit amet, consectetur adip.'
  },
  '2': {
    title: 'Second Blog Post',
    description: 'Hello React Router v6'
  }
};

这个独特的片段将被用于 web 浏览器的 URL 中，以查看每个帖子的内容。接下来，创立一个名为 Posts 的函数组件，其中显示所有博客帖子的列表：

function Posts() {
  return (<div style={{ padding: 20}}>
      <h2>Blog</h2>
      {/* 渲染任何匹配的子级 */}
      <Outlet />
    </div>
  );
}

定义另一个名为 PostLists 的组件，只有浏览器窗口中的 URL 点击 http://localhost:3000/posts，就会显示所有文章的列表。让咱们应用 JavaScript Object.entry() 办法从对象 BlogPosts 中返回一个数组，这个数组将被映射为显示所有博客文章的题目列表：

function PostLists() {
  return (
    <ul>
      {Object.entries(BlogPosts).map(([slug, { title}]) => (<li key={slug}>
          <h3>{title}</h3>
        </li>
      ))}
    </ul>
  );
}

批改 App 函数组件中的路由，如下所示：

<Routes>
  {/* 其余代码放弃不变 */}
  <Route path="posts" element={<Posts />}>
    <Route path="/" element={<PostLists />} />
  </Route>
</Routes>

这表明每当触发 URL http://localhost:3000/posts 时，将渲染博客文章列表，因而，组件 PostsLists：

如何拜访路由的 URL 参数和动静参数

要想从渲染的博客文章列表中点击文章题目来拜访各个文章，你要做的就是，将每个文章的题目包裹在 PostsLists 组件中的 Link 组件内。而后，应用每个文章的 slug 定义每个文章的门路，前缀为 /posts/ 的文章在浏览器中的门路是统一的。

<ul>
  {Object.entries(BlogPosts).map(([slug, { title}]) => (<li key={slug}>
      <Link to={`/posts/${slug}`}>
        <h3>{title}</h3>
      </Link>
    </li>
  ))}
</ul>

接下来，从 react-router-dom 库中导入一个名为 useParams 的钩子。通过这个钩子，你能够拜访特定路由（或 Slug）可能具备的任何动静参数。每个 slug 的动静参数都会是每篇博文的 title 和 description。拜访它们的须要是，当在浏览器窗口中以 URL 模式触发博客文章的特定段时，显示每个博客文章的内容：

import {useParams} from 'react-router-dom';

创立一个名为 Post 的新函数组件，该组件将从 useParams 钩子中获取以后的文章。应用 JavaScript 中的方括号符号语法，将创立一个新的 post 变量，该变量蕴含属性的值或博客文章的以后内容。

function Post() {
  const BlogPosts = {
    "1": {
      title: "第一篇博客文章",
      description: "第一篇博客文章，是对于 Vue3.0 的"
    },
    "2": {
      title: "第二篇博客文章",
      description: "Hello React Router v6"
    }
  };
  
  const {slug} = useParams();
  const post = BlogPosts[slug];
  const {title, description} = post;
  return (<div style={{ padding: 20}}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

最初，在 App 函数组件中增加一个称为 :slug 的动静路由，以渲染每个文章的内容：

// 其余代码放弃不变
<Route path="posts" element={<Posts />}>
  <Route path="/" element={<PostLists />} />
  <Route path=":slug" element={<Post />} />
</Route>

这是此步骤之后的残缺输入：

总结

如果你是第一次学习 React Router，心愿这篇文章能给你提供一个很好的介绍。如果你曾经相熟这个路由库以前的任何一个版本，我心愿这篇文章能让你理解以前和最新版本之间的变动。

获取本案例残缺代码

  • Codesandbox：https://codesandbox.io/s/luci…
  • Github：https://github.com/dunizb/Cod…

举荐浏览

  • 简化 React Hook 的 5 种办法
  • 不要适度应用 React.useCallback()
  • 应用 React 严格模式防止过期的代码和副作用
  • 实战：应用 React Hook 一步一步创立一个可排序表格组件
退出移动版