React Router v6 官方文档翻译 （一） |
您所在的位置：网站首页 › started翻译 › React Router v6 官方文档翻译 （一） |
|
专栏说明：对于react-router v6版本，有同事反应缺少相对完整的中文文档，查看不方便。为了便于使用，作者对官网文档进行针对性翻译，便于v6版本更广泛的被使用。 安装本文档介绍使用基于React框架的不同构建工具来配置React Router的一般方案。 基础安装原文路径 reactrouter.com/docs/en/v6/… 大多数React工程项目都使用包管理器npm 或者 Yarn进行依赖管理。使用React Router前的第一件事情，就是基于你的包管理工具进行React Router的安装。 npm $ npm install react-router-dom@6 复制代码 yarn $ yarn add react-router-dom@6 复制代码 pnpm $ pnpm add react-router-dom@6 复制代码 基于Create-react-app项目的安装原文路径 reactrouter.com/docs/en/v6/… 当你在cra项目中安装好依赖后，打开文件src/index.js， 从 react-router-dom 引入 BrowserRouter， 并使用标签包裹文件: import * as React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot( document.getElementById("root") ); root.render( ); 复制代码接下来你就可以在app中任意地方使用路由了： import * as React from "react"; import { Routes, Route, Link } from "react-router-dom"; import "./App.css"; function App() { return ( Welcome to React Router! ); } 复制代码上述文件中，Home和About是自定义的路由组件，通过import引入。 基于Parcel项目的安装在package.json中添加脚本： "scripts": { "start": "parcel index.html" } 复制代码安装完依赖后，在根目录下新建文件.babelrc: { "presets": ["@babel/preset-react"] } 复制代码然后在根目录的index.js文件中即可使用： import * as React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App.js"; const root = ReactDOM.createRoot( document.getElementById("root") ); root.render( ); 复制代码写入文件index.html： You need to enable JavaScript to run this app. 复制代码接下来就可以在App组价中使用router了，使用方式同cra项目。 基于Webpack项目的安装原文路径 reactrouter.com/docs/en/v6/… webpack是一种更细粒度的构建工具，您可以进行更加细微的配置。安装完必要的依赖后，便可以引入路由了： import { BrowserRouter, Routes, Route, } from "react-router-dom"; function App() { return ( Hello, React Router! ); } 复制代码 使用script标签全局安装原文路径 reactrouter.com/docs/en/v6/… React-router v6与React16.8+完全兼容。您完全可以在一个HTML中通过引入对应的js文件进行全局使用：（我这里删掉了原文的注释） var e = React.createElement; var Router = ReactRouterDOM.BrowserRouter; var Routes = ReactRouterDOM.Routes; var Route = ReactRouterDOM.Route; ReactDOM.render( ( e(Router, null, ( e(Routes, null, ( e(Route, { element: e('div', null, 'Hello, React Router!') }) )) )) ), document.getElementById('root') ); 复制代码虽然这种方法来得比较快，但是也引入了一些不必要的代码引用。React Router包含了很多小工具和组件，按需引入才是王道。所以还是推荐前三种安装方式。 快速开始（有一些与安装重复）原文地址 reactrouter.com/docs/en/v6/… 引入安装依赖，前边已经提到： npm install react-router-dom@6 复制代码配置路由 import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route, } from "react-router-dom"; // import your route components too const root = ReactDOM.createRoot( document.getElementById("root") ); root.render( ); 复制代码在v6之前的版本，有多路由要匹配时，需要合理安排前后放置顺序。在v6中，匹配更智能，不要在担心顺序问题了，举个例子： 复制代码路由teams/new似乎对于上边两个路径都可以匹配，但是第二个更精确，所以v6 router会选择第二个NewTeamForm。 路由跳转可使用Link标签来点击改变URL，或者使用useNavigate钩子通过代码跳转。 Link import { Link } from "react-router-dom"; function Home() { return ( Home Home |{" "} About ); } 复制代码 navigate import { useNavigate } from "react-router-dom"; function Invoices() { let navigate = useNavigate(); return ( { let newInvoice = await createInvoice( event.target ); navigate(`/invoices/${newInvoice.id}`); }} /> ); } 复制代码 获取路由参数可以使用 :style 形式传参， 使用 useParams() 获取参数： import { Routes, Route, useParams } from "react-router-dom"; function App() { return ( ); } function Invoice() { let params = useParams(); return Invoice {params.invoiceId}; } 复制代码举一个通过路由参数获取异步数据的例子： function Invoice() { let { invoiceId } = useParams(); // useFakeFetch可以理解为一个异步请求 let invoice = useFakeFetch(`/api/invoices/${invoiceId}`); return invoice ? ( {invoice.customerName} ) : ( ); } 复制代码2023.3.9 补充：这里顺便补充一下获取问号传参的方式，方便查询 问号传参获取 v6 中 // 引入 import { useSearchParams } from 'react-router-dom'; ... // 获取 const [searchParams] = useSearchParams(); // 使用 const currentType = searchParams.get('type'); 复制代码 v5中v5 版本没有这个hook，需要自己定义一下： // useSearchParams.js import { useLocation } from "react-router-dom"; import { useMemo } from "react"; /** * 获取当前页面的查询参数 */ export default function useSearchParams() { const { search } = useLocation(); return useMemo(() => { const urlSearchParams = new URLSearchParams(search); let params = {}; urlSearchParams.forEach((value, key) => { params[key] = value; }); return params; }, [search]); } 复制代码使用： const searchParams = useSearchParams(); console.log(searchParams.type) 复制代码 路由嵌套路由嵌套是一个很强大的功能，可以减少冗杂的布局代码，降低布局的难度。如下使用： function App() { return ( ); } 复制代码分别通过如下三种路径匹配： "/invoices" "/invoices/123" "/invoices/sent" Outlet可以使用一个路由占位符，针对多匹配的路由位置进行复用，类似于vue router的路由插槽和Angular的router-outlet： import { Routes, Route, Link, Outlet, } from "react-router-dom"; function App() { return ( ); } function Layout() { return ( Welcome to the app! Invoices | {" "} Dashboard ); } function Invoices() { return Invoices; } function Dashboard() { return Dashboard; } 复制代码这样会把URL片段构建为组件树，路由下的子路由会动态的去替换掉父路由的，以此达到嵌套的目的。 默认路由当一个父路由有多个子路由，且当前URL停留在父路由时（上个例子中，路由为'/'时，outlet里就无法识别渲染），界面该如何渲染呢？你需要给父路由设置一个默认渲染的子路由。 function App() { return ( ); } 复制代码加上index属性后就会默认渲染该路由下的组件。而且默认索引路由可以放在路由嵌套的任何一级中使用。 嵌套路由中使用Link ... // Invoices{" "} Team ... 复制代码在这种情况下，上述两个Link会连接到/dashboard/invoices 和 /dashboard/team两个地址，这就是相对路由。 404路由当没有一个URL匹配时，就会查找是否配置了通用路由path="*"，他可以匹配任何形式的路由，当没有更精确的路由匹配时，就进入该路由的配置，该路由的优先级是最低的。 function App() { return ( ); } 复制代码 多个路由组一个Routes组件包裹的路由为一组，v6中你可以使用多个Routes。每一个都是独立的，分别进行路由匹配，其都是相对于跟路由的一个链接。 function App() { return ( ); } 复制代码 多级Routes时注意事项当子组件也使用了Routes时，需要在其上一级父路由后边追加/*，追加的*的层级数取决于你子路由的层级数。 function App() { return ( // 不加*会匹配不到Dashboard中的子路由 ); } function Dashboard() { return ( Look, more routes! ); } 复制代码常用配置介绍完毕了。源文档的Tutorial感觉与本章基本类似，我打算跳过他，下一章讲解FAQs。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |