React Router V6 新特性
安装
npm install react-router-dom@6
配置路由
import { render } from "react-dom";
import {BrowserRouter,Routes,Route
} from "react-router-dom";
// import your route components toorender(<BrowserRouter><Routes><Route path="/" element={<App />}><Route index element={<Home />} /><Route path="teams" element={<Teams />}><Route path=":teamId" element={<Team />} /><Route path="new" element={<NewTeamForm />} /><Route index element={<LeagueStandings />} /></Route></Route></Routes></BrowserRouter>,document.getElementById("root")
);
在以前版本的 React Router 中,当多个路由匹配一个不明确的 URL 时,你必须以某种方式对你的路由进行排序才能得到正确的渲染。V6 更聪明,会选择最具体的匹配,所以你不必再担心了。例如,URL /teams/new
匹配这两个路由:
<Route path="teams/:teamId" element={<Team />} />
<Route path="teams/new" element={<NewTeamForm />} />
由于 teams/new
比 /teams/:teamId
是更具体的匹配 ,因此 <NewTeamForm />
将呈现。
导航
使用 Link 让用户更改 URL 或者用 useNavigate 自己做跳转:
import { Link } from "react-router-dom";function Home() {return (<div><h1>Home</h1><nav><Link to="/">Home</Link> |{" "}<Link to="about">About</Link></nav></div>);
}
import { useNavigate } from "react-router-dom";function Invoices() {let navigate = useNavigate();return (<div><NewInvoiceFormonSubmit={async event => {let newInvoice = await createInvoice(event.target);navigate(`/invoices/${newInvoice.id}`);}}/></div>);
}
读取 URL 参数
在路由路径中使用 :style
语法,组件中用 useParams()
取值:
import { Routes, Route, useParams } from "react-router-dom";function App() {return (<Routes><Routepath="invoices/:invoiceId"element={<Invoice />}/></Routes>);
}function Invoice() {let params = useParams();return <h1>Invoice {params.invoiceId}</h1>;
}
请注意,路径中 :invoiceId
和参数的键 params.invoiceId
匹配,key 值必须对应。
一个非常常见的用例是在组件呈现时获取数据:
function Invoice() {let { invoiceId } = useParams();let invoice = useFakeFetch(`/api/invoices/${invoiceId}`);return invoice ? (<div><h1>{invoice.customerName}</h1></div>) : (<Loading />);
}
嵌套路由
这是 React Router 最强大的功能之一,因此您不必处理复杂的布局代码。绝大多数布局都与 URL 的片段耦合,而 React Router 完全符合了这一点。
路由可以相互嵌套,它们的路径也会嵌套(子继承父)。
function App() {return (<Routes><Route path="invoices" element={<Invoices />}><Route path=":invoiceId" element={<Invoice />} /><Route path="sent" element={<SentInvoices />} /></Route></Routes>);
}
此路由配置定义了三个路由路径:
"/invoices"
"/invoices/sent"
"/invoices/:invoiceId"
当 URL 是"/invoices/sent", 组件树为:
<App><Invoices><SentInvoices /></Invoices>
</App>
当 URL 为"/invoices/123",组件树为:
<App><Invoices><Invoice /></Invoices>
</App>
请注意随 URL (<SentInvoices>
和<Invoice>
)更改的内部组件。父路由 ( <Invoices>
) 负责确保匹配的子路由使用了 <Outlet>
,这是完整的示例:
import { Routes, Route, Outlet } from "react-router-dom";function App() {return (<Routes><Route path="invoices" element={<Invoices />}><Route path=":invoiceId" element={<Invoice />} /><Route path="sent" element={<SentInvoices />} /></Route></Routes>);
}function Invoices() {return (<div><h1>Invoices</h1><Outlet /></div>);
}function Invoice() {let { invoiceId } = useParams();return <h1>Invoice {invoiceId}</h1>;
}function SentInvoices() {return <h1>Sent Invoices</h1>;
}
嵌套的 url 路径映射到嵌套的组件树。这非常适合创建在布局中具有持久导航且内部部分随 URL 变化的 UI。您会注意到许多网站都具有多层布局嵌套。
索引路由
索引路由可以被认为是“默认子路由”。当父路由有多个子路由,但 URL 仅在父路由的路径上时,您可能希望将某些内容渲染到页面中。
function App() {return (<Routes><Route path="/" element={<Layout />}><Route path="invoices" element={<Invoices />} /><Route path="activity" element={<Activity />} /></Route></Routes>);
}function Layout() {return (<div><GlobalNav /><main><Outlet /></main></div>);
}
这个页面在“/invoices”和“/activity”上看起来很棒,但在“/”它只是一个空白页面,<main>
因为那里没有子路由渲染。为此,我们可以添加一个索引路由:
function App() {return (<Routes><Route path="/" element={<Layout />}><Route index element={<Activity />} /><Route path="invoices" element={<Invoices />} /><Route path="activity" element={<Activity />} /></Route></Routes>);
}
现在在“/”处,<Activity>
元素将在 Outlet 出口内呈现。
您可以在路由层次结构的任何级别拥有一个索引路由,当父级匹配但其他子级都不匹配时,该索引路由将呈现。
function App() {return (<Routes><Route index element={<Home />} /><Route path="dashboard" element={<Dashboard />}><Route index element={<DashboardHome />} /><Routepath="invoices"element={<DashboardInvoices />}/></Route></Routes>);
}
相对链接
相对 <Link to>
值(不以 / 开头)是相对于渲染它们的路径的路径。下面的两个链接将链接到 /dashboard/invoices 和 /dashboard/team 因为它们在 <Dashboard>
. 当您更改父级的 URL 或重新排列您的组件时,这非常好,因为您的所有链接都会自动更新。
import {Routes,Route,Link,Outlet
} from "react-router-dom";function Home() {return <h1>Home</h1>;
}function Dashboard() {return (<div><h1>Dashboard</h1><nav><Link to="invoices">Invoices</Link>{" "}<Link to="team">Team</Link></nav><hr /><Outlet /></div>);
}function Invoices() {return <h1>Invoices</h1>;
}function Team() {return <h1>Team</h1>;
}function App() {return (<Routes><Route path="/" element={<Home />} /><Route path="dashboard" element={<Dashboard />}><Route path="invoices" element={<Invoices />} /><Route path="team" element={<Team />} /></Route></Routes>);
}
"Not Found" 路由
当没有其他路由与 URL 匹配时,您可以使用path="*". 此路由将匹配任何 URL,但具有最弱的优先级,因此路由仅在没有其他路由匹配时才会选择它。
function App() {return (<Routes><Route path="/" element={<Home />} /><Route path="dashboard" element={<Dashboard />} /><Route path="*" element={<NotFound />} /></Routes>);
}
多组路由
尽管您应该 <Router>
在应用程序中只拥有一个,但您可以 <Routes>
在任何需要的地方拥有任意数量的。每个 <Routes>
元素独立于其他元素运行,并选择一个子路由进行渲染。
function App() {return (<div><Sidebar><Routes><Route path="/" element={<MainNav />} /><Routepath="dashboard"element={<DashboardNav />}/></Routes></Sidebar><MainContent><Routes><Route path="/" element={<Home />}><Route path="about" element={<About />} /><Route path="support" element={<Support />} /></Route><Route path="dashboard" element={<Dashboard />}><Route path="invoices" element={<Invoices />} /><Route path="team" element={<Team />} /></Route><Route path="*" element={<NotFound />} /></Routes></MainContent></div>);
}
React Router V6 新特性相关推荐
- 在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
- React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
- 稳定性大幅度提升:SOFARegistry v6 新特性介绍
SOFARegistry 是蚂蚁集团内部在使用的服务注册中心,它支撑起了蚂蚁集团海量规模的业务服务.但随着蚂蚁集团业务规模的日渐庞大,SOFARegistry 在资源.容量.运维等方面也遇到了一些挑战 ...
- React Router v6
https://juejin.cn/post/7025418839454122015#heading-7
- React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案 文章目录 React Router 升级 v6: Redirect 重定向替代方案 React Router v6 Redir ...
- react 数组新增_React 新特性 Hooks 讲解及实例(二)
本文是 React 新特性系列的第二篇,第一篇请点击这里: React 新特性讲解及实例 什么是 Hooks Hook 是 React 16.8 的新增特性.它可以让你在不编写 类组件 的情况下使用 ...
- 你必须了解的 React 18 新特性
你必须了解的 React 18 新特性 你必须了解的 React 18 新特性 1. React 18是什么? 2. 升级到 React 18 3. React 17 的问题 4. React 18 ...
- react router
目录 前言 核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包 一.React-Router v1 1.一些概念 ...
- 那些激动人心的React,Webpack,Babel的新特性对于我们开发体验带来哪些提升
(Webpack 4.0+, React 16.0.0+, Babel 7+) 作者: 赵玮龙 写在开头: 在怀着激动和忐忑的心情写出团队第一篇文章时,这个兴奋感一方面来自团队组建以来这是我们首次对外 ...
最新文章
- 百度map-api-视图
- ITK:比较两个图像并将输出像素设置为最小值
- CentOS 7 上安装vim 解決 centos -bash: vim: command not found
- PTA-7-3 A除以B (10分)
- 当你不被上司信任和待见,工作无法正常开展
- ul在Firefox和IE下的不同表现
- 版式设计优秀作品欣赏_垂直版式的垂直作品设计探索
- 物联网技术与应用知识点总结
- Second season sixth episode,Chandler and Joey lost Ross‘s baby???!!!
- ubuntu不能访问windows中的文件
- 2021年低压电工新版试题及低压电工证考试
- php万年历源代码!源代码![上一年、上一月、下一月、下一年、附加当天日期加背景颜色]-私聊源码
- 【React全家桶】 React入门
- GOM引擎登录器配置教程
- python有什么好玩的书_史上最全的Python书排行榜|你想知道的都在这里
- 搭档之家:首款透明电视来啦!小米大师系列预售立即秒光,你抢到了吗?
- 交叉线和直通线的做法
- JavaScript Boolean(布尔)对象
- 大型国企郑煤机集团引入电子签章,推动合同、单据、档案在线签
- T12烙铁(焊台)通用电源(2个方案,24V)
热门文章
- 小众却顽强的编程语言 Erlang ,你了解多少?
- OpenSLR 中国镜像背后的数据存储服务商,原来是这样一家公司!
- 震惊!谷歌专家爆料:Python和AI这回真的玩大了!网友:好方法!
- 详解 TCP 连接的“ 三次握手 ”与“ 四次挥手 ”
- 你的代码,“拯救”过多少人?
- 腾讯云开发者大会 | 腾讯云大学首次与业界顶尖厂商合作的线上学习专区重磅发布...
- 金山云肖江:5G推动智慧人居产业到达新高度
- 2019 开源安全报告:开发者安全技能短板明显,热门项目成漏洞重灾区!
- 企业上公有云的 10 种驱动力
- 为什么你的 JavaScript 代码如此冗长?!