React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用’react-router-dom‘包来实现页面的路由
在React router中有三种类型的组件,一是路由组件
第二种是路径匹配组件
第三种是导航组件
。 路由组件: BrowserRouter
和 HashRouter
路径匹配的组件: Route
和 Switch
导航组件: Link
安装
npm install react-router-dom
复制代码
简单用法
import React from 'react'
import TodoList from './components/TodoList'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'const App: React.FC = () => {return (<div className='App'><Router><Link to='/'>root</Link> <br /><Link to='/hello'>hello</Link> <br /><Link to='/todolist'>todolist</Link><div><Route path='/' exact render={() => {return <div>root page</div>}} /><Route path='/hello' render={() => {return <div>hello world</div>}} /><Route path='/todolist' component={TodoList} /></div></Router></div>)
}export default App复制代码
通过上面的代码我么就实现了我们项目的基本路由功能,Router
组件决定了我们使用html5 history api,Route
组件定义了路由的匹配规则和渲染内容,使用 Link
组件进行路由之间的导航。使用 exact
属性来定义路径是不是精确匹配。
使用url传参数
<Route path='/hello/:name' render={({match}) => {return <div>hello {match.params.name}</div>}} />
复制代码
使用 <Route>
匹配的react 组件会在props 中包含一个match
的属性,通过match.params
可以获取到参数对象
调用方法跳转
<Route path='/hello/:name' render={({ match, history }) => {return <div>hello {match.params.name}<button onClick={()=>{history.push('/hello')}}>to hello</button></div>
}} />
复制代码
使用 <Route>
匹配的react 组件会在props 中包含一个history
的属性,history中的方法
- history.push(url) 路由跳转
- hisroty.replace(url) 路由跳转不计入历史记录
- history.go(n) 根据索引前进或者后退
- history.goBack() 后端
- history.goForward() 前进
常用组件介绍
BrowserRouter
使用HTML5历史记录API(pushState,replaceState和popstate事件)的,以使您的UI与URL保持同步。
属性:
1.basename: string 如果你的项目在服务器上的一个子目录那么这个basename就是目录的名称例如/calendar
<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">
复制代码
2.getUserConfirmation
结合 组件使用可以拦截和修改 Prompt 的消息。
function getConfirmation(message, callback) {const allowTransition = window.confirm(message);callback(allowTransition);
}<BrowserRouter getUserConfirmation={getConfirmation} />;复制代码
3.forceRefresh:bool 如果为true在页面导航的时候后采用整个页面刷新的形式。 4.keyLength location.key(表示当前位置的唯一字符串)的长度。默认为6。 5.children:node 要渲染的子元素。
Route
主要职责是当Route的位置和路径匹配的时候渲染对应的ui
属性:
用于渲染的props
1.component 一个react 组件,将在path
匹配的时候自动渲染
2.render:func 通过编写一个方法,方法返回一个react dom ,当 path匹配的时候自动渲染
3.children:func 同样是一个方法,匹配规则时无论path是否匹配都会渲染,但是match属性只有在路由匹配的时候才会有值。这样方便你根据路由是否匹配渲染不同的ui
<Route path='/hello' exact children={({ match, history, location }) => {return <div>hello {match ? 'match' : ''}</div>}}></Route>复制代码
上面的三种方法都能在组件中获取到route传过去的三个props history / location / match
其他属性:
4.path:string | string[] 需要匹配的路径或者路径数组
5.exact:bool 如果为true,则仅在路径与location.pathname完全匹配时才匹配。
6.strict 如果为true,则具有尾部斜杠的路径将仅匹配具有尾部斜杠的location.pathname。当location.pathname中有其他URL段时,这不起作用。
7.sensitive:bool 匹配规则对大小写是否敏感,true 的话为区分大小写。
Link
导航到指定的路由
属性:
1.to:string|object 如果值为字符串,则导航到字符串所在的路由 object:
- pathname :表示链接到的路径的字符串
/hello
- search :query参数
?name=cfl
- hash : hash的值
#weixin
- state
Switch
呈现于于location.pathname 所匹配的第一个 或。
Prompt
当从当前路由退出的时候给一个提示框。
class TestComp extends React.Component {render() {return <div><Prompt message='test' when={true}></Prompt>test router</div>}
}复制代码
转载于:https://juejin.im/post/5cfb2894e51d4510774a8831
React Router 学习相关推荐
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
- React Router教程–如何使用代码示例渲染,重定向,切换,链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
- 关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
- 使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
- React+TS学习和使用(三):React Redux和项目的路由配置
开启学习react+ts,本篇主要是学习使用React Redux和项目的路由配置 一.React Redux 需求:使用TS+React Redux实现一个累加. A. 安装 $ yarn add ...
- React路由管理 —— React Router 总结
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢, ...
- react router教程
react router教程 文章目录 react router教程 1:安装 2:配置路由 3:添加一个新页面测试路由 4:配置未找到的路由 5:跳转页面 5.1:通过 js 5.2:通过 dom ...
- React Router 中文文档(一)
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
最新文章
- 这才是程序员的爱情观!?
- android图文介绍NDK安装及简单jni demon的实现
- centos编译mysql5.6_centos7上编译安装mysql5.6
- 【Python CheckiO 题解】Fizz Buzz
- c语言中通过指针引用数组,C语言基础(二)
- 24时区,GMT,UTC,DST,CST时间详解
- 服务器系统关了,各种服务器系统的关机
- VMware vSphere 文档--总目录vSphere 5.5 6.0 6.5 6.7 7.0
- window对象与document对象的区别
- 黄山归来不看岳---黄山游记之上山篇
- 分布式事务的四种解决方案,值得参考!
- ETL调度开发(5)——连接数据库运行数据库命令子程序
- 抽象代数 01.06 变换群与置换群
- office2020与2016版的不同_Office哪个版本最好用?Office 2007/2010/2013/2016/2019/2020怎么选?...
- 主机游戏神作和排行榜
- 学神乔明达和他堪称神迹的学习履历
- Nginx之正则表达式、location匹配简介以及rewrite重写
- postgresql源码学习(十三)—— 行锁①-行锁模式与xmax
- 单片机程序烧录方式有几种?
- dellemc服务器中文语言设置,美版windows10系统设置中文语言的方法
热门文章
- [bzoj1036][ZJOI2008]树的统计Count
- Android 4 学习(20):ActionBar
- 文本框内容改变触发事件
- 抓取AJAX网页的方法-Firefox组件,C#集成
- CSS height高度 和 width宽度
- 减治法在生成子集问题中的应用(JAVA)--递归、二进制反射格雷码
- 云服务器Linux安装,配置,使用nginx
- warframe计算机拒绝访问,Win10运行warframe出现蓝屏DRIVER_CORRUPTED_EXPOOL怎么办
- Linux crontab 定时任务没执行,没收到错误信息邮件
- springMvc(实现HandlerMethodArgumentResolver)自定义参数解析器