react-router-dom
文章平均质量分 55
crayon-shin-chan
这个作者很懒,什么都没留下…
展开
-
react-router实战之弹框画廊实现
1.简介其实就是实现一个类似图片相册之类的效果,点击图片时背景的图片列表不变,但是出现图片弹框2.实例import React, { MouseEventHandler } from "react";import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation, useParams} from "react-router-dom";expo...原创 2021-02-13 18:31:40 · 130 阅读 · 0 评论 -
react-router实战之路由配置
1.简介有些人在集中式路由配置中发现价值。路由配置只是数据。 React擅长映射将数据放入组件中,而<Route>是组件。我们的路由配置只是逻辑“路由”的数组,使用`path`和`component`道具,顺序与您在<Switch>中进行操作的方式相同。2.实例import React from "react";import { BrowserRouter as Router, Switch, Route, Link} f...原创 2021-02-13 18:10:01 · 277 阅读 · 0 评论 -
react-router实战之使用react-transition-group动画过度
1.简介react-transition-group默认的动画触发方式为设置in属性为true,此时被包含的组件会被以动画方式渲染2.实例import React from "react";import { TransitionGroup, CSSTransition} from "react-transition-group";import { BrowserRouter as Router, Switch, Route, Link,...原创 2021-02-13 17:56:06 · 445 阅读 · 0 评论 -
react-router实战之动态侧边栏
1.简介有时需要侧边栏内容随着路由而改变2.实例const routes = [ { path: "/", exact: true, sidebar: () => <div>home!</div>, main: () => <h2>Home</h2> }, { path: "/bubblegum", sidebar:...原创 2021-02-13 11:26:53 · 941 阅读 · 0 评论 -
react-router实战之递归路径
1.简介有时您不知道所有可能的路线预先为您的应用程序; 例如,当构建文件系统浏览UI或确定根据数据动态生成的网址。在这些情况下,它有助于拥有一个能够在运行时根据需要生成路由。2.实例function Person() { let { url } = useRouteMatch(); let { id } = useParams<any>(); let person = find(parseInt(id)); retu...原创 2021-02-13 11:18:49 · 384 阅读 · 0 评论 -
react-router实战之Prompt确认路由跳转
1.简介用于在离开页面之前提示用户。当您的应用程序进入应阻止用户导航的状态时(例如,表单已完成一半填充),请使用<Prompt>。2.属性2.1 message提示用户尝试离开的消息。可以是字符串或者函数:<Prompt message="Are you sure you want to leave?" /><Prompt message={(location, action) => { if (......原创 2021-02-13 11:05:40 · 1504 阅读 · 2 评论 -
react-router实战之定制链接组件
1.实例type MenuLinkProps = { label : string , to : string , activeOnlyWhenExact? : boolean}function MenuLink({ label, to, activeOnlyWhenExact = false } : MenuLinkProps) { let match = useRouteMatch({ path: to, exact: a...原创 2021-02-13 10:51:48 · 197 阅读 · 0 评论 -
react-router实战之重定向Redirect
1.简介渲染<Redirect>会导航到新位置。新位置将覆盖历史记录堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样。<Redirect>虽然是一个组件,实际上更像一个动作,只要这个组件被渲染就发生重定向动作2.属性2.1 to重定向到的URL。任何可以path-to-regexp@^1.7.0理解的有效URL路径。to中使用的所有URL参数必须由from覆盖。也可以使用一个location对象来代表重定向到的位置。p...原创 2021-02-12 23:19:39 · 1041 阅读 · 0 评论 -
react-router实战之嵌套路由
1.实例import React from 'react';import { BrowserRouter as Router, Switch, Route, Link, useParams, useRouteMatch} from "react-router-dom";import './App.css'; function Topics() { let { path, url } = useRouteMatch(); re...原创 2021-02-12 22:09:36 · 293 阅读 · 0 评论 -
react-router实战Hooks之useRouteMatch
1.简介该useRouteMatch钩子尝试获取当前URL的匹配。对于无需实际呈现即可访问比赛数据的最有用的方法。2.API该useRouteMatch钩子执行:不带参数时,返回当前<Route>对象的match对象 接受一个参数时,该参数与matchPath的props参数相同。它可以是字符串的路径名,也可以是带有Route组件match属性的对象,如下所示:const match = useRouteMatch({ path: "/BLOG...原创 2021-02-12 21:21:54 · 7256 阅读 · 0 评论 -
react-router实战Hooks之useParams
1.简介useParams返回URL参数的键/值对的对象。使用它来访问当前<Route>的match.params。2.实例function Home() { let { path } = useParams<any>(); return <h2>Path {path}</h2>;} function App() { return ( <div style={{ wi...原创 2021-02-12 12:17:27 · 13882 阅读 · 0 评论 -
react-router实战Hooks之useLocation
1.简介该useLocation挂钩返回代表当前URL的location对象。您可以将其视为类似于URL更改时useState会返回新值的location。2.API位置表示应用程序现在所在的位置,您希望其运行的位置,甚至是以前的位置。看起来像这样:{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', hash:...原创 2021-02-12 12:04:00 · 15010 阅读 · 1 评论 -
react-router实战Hooks之useHistory
1.简介该useHistory钩子使您可以访问可用于导航的history实例。2.APIhistory指的history程序包,它是React Router仅有的两个主要依赖项之一(除了React本身),它提供了几种不同的实现来在各种环境中管理JavaScript中的会话历史记录。browser history:特定于DOM的实现,在支持HTML5历史记录API的Web浏览器中很有用 hash history:遗留Web浏览器的DOM特定实现 memory his...原创 2021-02-12 11:30:49 · 6284 阅读 · 0 评论 -
react-router实战之Switch
1.简介Switch与各种语言中的Switch关键字含义类似,代表只执行第一个匹配的含义。渲染第一个与位置匹配的<Route>或<Redirect>元素<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。如果没有<Switch>,直接使用一堆<Route>,则每个与当前路径匹配的<Route>都会被绘制2.实例使用<Switch>时 <S...原创 2021-02-11 22:00:47 · 2887 阅读 · 4 评论 -
React Router之API
1.HooksReact Router附带了一些挂钩,可让您访问路由器的状态并从组件内部执行导航。请注意:您必须使用React> = 16.8才能使用这些钩子中的任何一个!useHistory useLocation useParams useRouteMatch1.1 useHistory该useHistory挂钩使您可以访问history可用于导航的实例。import { useHistory } from "react-router-dom"...翻译 2021-01-17 00:33:31 · 276 阅读 · 0 评论 -
React Router之深度Redux集成
Redux是React生态系统的重要组成部分。对于想要同时使用React Router和Redux的人们,我们希望使其无缝集成。为此,有些人希望:与store同步路由数据,并从store访问路由数据。 能够通过dispatching动作进行导航。 在Redux devtools中支持对路线更改进行时间旅行调试。所有这些都需要更深入的集成。我们的建议是完全不要在Redux store中保留您的Route。这是我们的理由:路由数据已经成为您关心它的大多数组件的支持。无论是来自store还...翻译 2021-01-16 23:45:02 · 300 阅读 · 0 评论 -
React Router之测试
1.简介React Router依靠React上下文来工作。这会影响您如何测试使用我们的组件的组件。2.语境如果尝试对呈现a<Link>或a<Route>等的组件之一进行单元测试,则会收到一些有关上下文的错误和警告。虽然你可能受到诱惑,自己存根出路由器背景下,我们建议你换你的单元测试中的一个Router组成部分:基础Router与history支柱,或者<StaticRouter>,<MemoryRouter>或者<...翻译 2021-01-16 23:42:45 · 242 阅读 · 1 评论 -
React Router之动态路由思想
1.简介本指南的目的是解释使用React Router时要具有的思维模型。我们称其为“动态路由”,它与您可能更熟悉的“静态路由”完全不同。2.静态路由如果您使用过Rails,Express,Ember,Angular等,则使用了静态路由。在这些框架中,您将在进行任何渲染之前将路由声明为应用程序初始化的一部分。React Router pre-v4也是静态的(主要是)。让我们看一下如何在express中配置路由:// Express Style routing:...翻译 2021-01-16 23:16:07 · 1707 阅读 · 0 评论 -
React Router之滚动还原
1.简介在早期版本的React Router中,我们提供了对滚动恢复的开箱即用的支持,从那以后人们一直在要求它。希望本文档可以帮助您从滚动条和路由中获得所需的信息!浏览器开始以history.pushState与普通浏览器导航相同的方式自行处理滚动恢复。它已经可以在chrome中使用,而且非常棒。这是Scroll恢复规格。由于浏览器开始处理“默认情况”,并且应用程序具有不同的滚动需求(例如本网站!),因此我们不附带默认滚动管理功能。本指南应帮助您实现任何滚动需求。2.滚动到...翻译 2021-01-16 23:02:49 · 514 阅读 · 0 评论 -
React Router之代码分割
1.简介网络的一项重要功能是,我们不必让访问者下载整个应用程序即可使用。您可以将代码拆分视为增量下载应用程序。要做到这一点,我们将使用的WebPack,@babel/plugin-syntax-dynamic-import和loadable-components。webpack内置了对动态导入的支持;但是,如果您使用Babel(例如,将JSX编译为JavaScript),则需要使用该@babel/plugin-syntax-dynamic-import插件。这是仅语法的插件,这意味着Ba...翻译 2021-01-16 22:49:24 · 221 阅读 · 0 评论 -
React Router之服务端渲染
1.简介服务器上的渲染有些不同,因为它们都是无状态的。基本思想是,我们将应用包装在无状态<StaticRouter>而不是有状态的<BrowserRouter>。我们从服务器传入请求的url,以便路由可以匹配,然后context我们将讨论一个prop。// client<BrowserRouter> <App/></BrowserRouter>// server (not the complete stor...翻译 2021-01-16 22:43:42 · 284 阅读 · 0 评论 -
React Router实战之基本路由
1.基本路由import React from "react";import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom"; export default function App() { return ( <Router> <div> <nav> <ul> ...原创 2021-01-13 23:35:58 · 134 阅读 · 0 评论 -
React Router之主要组件
1.简介React Router中的组件主要分为三类:路由器,像<BrowserRouter>和<HashRouter> Route匹配器,例如<Route>和<Switch> 和导航,比如<Link>,<NavLink>和<Redirect>我们还喜欢将导航组件视为“Route更改者”。您应该从react-router-dom中导入Web应用程序中使用的所有组件。import { Bro...翻译 2021-01-13 23:13:33 · 608 阅读 · 0 评论 -
React Router快速入门
1.简介要在Web应用程序中开始使用React Router,您需要一个React Web应用程序。如果需要创建一个,我们建议您尝试create-react-app。这是一个非常流行的工具,可以与React Router一起很好地工作。首先,安装create-react-app并创建一个新项目。npx create-react-app demo-appcd demo-app2.安装您可以使用或从npm注册表中安装React Router。由于我们正在构建We...翻译 2021-01-13 22:33:36 · 166 阅读 · 0 评论