本文首发于公众号《前端全栈开发者》，第一工夫浏览最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！
在本教程中，让咱们看一下如何应用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-examplecd react-router-v6-exampleyarn 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一步一步创立一个可排序表格组件