阮一峰 React Router 教程
阮一峰 React Router 教程
本文介绍 React 体系的一个重要部分:路由库 React-Router。它是官方维护的,事实上也是唯一可选的路由库。它通过管理 URL,实现组件的切换和状态的变化,开发复杂的应用几乎肯定会用到。
另外,我没有准备示例库,因为官方的示例库非常棒,由浅入深,分成14步,每一步都有详细的代码解释。我强烈建议你先跟着做一遍,然后再看下面的API讲解。
([说明] 本文写作时,React-router 是 2.x 版,本文的内容只适合这个版本,与最新的 4.x 版不兼容。目前,官方同时维护 2.x 和 4.x 两个版本,所以前者依然可以用在项目中。2017年3月)
一、基本用法
React Router 安装命令如下。
$ npm install -S react-router
使用时,路由器Router
就是React的一个组件。
import { Router } from 'react-router'; render(<Router/>, document.getElementById('app'));
Router
组件本身只是一个容器,真正的路由要通过Route
组件定义。
import { Router, Route, hashHistory } from 'react-router';render(( <Router history={hashHistory}> <Route path="/" component={App}/> </Router> ), document.getElementById('app'));
上面代码中,用户访问根路由/
(比如http://www.example.com/
),组件APP
就会加载到document.getElementById('app')
。
你可能还注意到,Router
组件有一个参数history
,它的值hashHistory
表示,路由的切换由URL的hash变化决定,即URL的#
部分发生变化。举例来说,用户访问http://www.example.com/
,实际会看到的是http://www.example.com/#/
。
Route
组件定义了URL路径与组件的对应关系。你可以同时使用多个Route
组件。
<Router history={hashHistory}><Route path="/" component={App}/><Route path="/repos" component={Repos}/><Route path="/about" component={About}/> </Router>
上面代码中,用户访问/repos
(比如http://localhost:8080/#/repos
)时,加载Repos
组件;访问/about
(http://localhost:8080/#/about
)时,加载About
组件。
二、嵌套路由
Route
组件还可以嵌套。
<Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>
上面代码中,用户访问/repos
时,会先加载App
组件,然后在它的内部再加载Repos
组件。
<App><Repos/> </App>
App
组件要写成下面的样子。
export default React.createClass({ render() { return <div> {this.props.children} </div> } })
上面代码中,App
组件的this.props.children
属性就是子组件。
子路由也可以不写在Router
组件里面,单独传入Router
组件的routes
属性。
let routes = <Route path="/" component={App}><Route path="/repos" component={Repos}/><Route path="/about" component={About}/> </Route>;<Router routes={routes} history={browserHistory}/>
三、 path 属性
Route
组件的path
属性指定路由的匹配规则。这个属性是可以省略的,这样的话,不管路径是否匹配,总是会加载指定组件。
请看下面的例子。
<Route path="inbox" component={Inbox}><Route path="messages/:id" component={Message} /> </Route>
上面代码中,当用户访问/inbox/messages/:id
时,会加载下面的组件。
<Inbox><Message/> </Inbox>
如果省略外层Route
的path
参数,写成下面的样子。
<Route component={Inbox}><Route path="inbox/messages/:id" component={Message} /> </Route>
现在用户访问/inbox/messages/:id
时,组件加载还是原来的样子。
<Inbox><Message/> </Inbox>
四、通配符
path
属性可以使用通配符。
<Route path="/hello/:name"> // 匹配 /hello/michael // 匹配 /hello/ryan<Route path="/hello(/:name)"> // 匹配 /hello // 匹配 /hello/michael // 匹配 /hello/ryan<Route path="/files/*.*"> // 匹配 /files/hello.jpg // 匹配 /files/hello.html<Route path="/files/*"> // 匹配 /files/ // 匹配 /files/a // 匹配 /files/a/b<Route path="/**/*.jpg"> // 匹配 /files/hello.jpg // 匹配 /files/path/to/file.jpg
通配符的规则如下。
(1):paramName
:paramName
匹配URL的一个部分,直到遇到下一个/
、?
、#
为止。这个路径参数可以通过this.props.params.paramName
取出。(2)()
()
表示URL的这个部分是可选的。(3)*
*
匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。(4) **
**
匹配任意字符,直到下一个/
、?
、#
为止。匹配方式是贪婪模式。
path
属性也可以使用相对路径(不以/
开头),匹配时就会相对于父组件的路径,可以参考上一节的例子。嵌套路由如果想摆脱这个规则,可以使用绝对路由。
路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了。
<Route path="/comments" ... /> <Route path="/comments" ... />
上面代码中,路径/comments
同时匹配两个规则,第二个规则不会生效。
设置路径参数时,需要特别小心这一点。
<Router><Route path="/:userName/:id" component={UserPage}/><Route path="/about/me" component={About}/> </Router>
上面代码中,用户访问/about/me
时,不会触发第二个路由规则,因为它会匹配/:userName/:id
这个规则。因此,带参数的路径一般要写在路由规则的底部。
此外,URL的查询字符串/foo?bar=baz
,可以用this.props.location.query.bar
获取。
五、IndexRoute 组件
下面的例子,你会不会觉得有一点问题?
<Router><Route path="/" component={App}><Route path="accounts" component={Accounts}/><Route path="statements" component={Statements}/></Route> </Router>
上面代码中,访问根路径/
,不会加载任何子组件。也就是说,App
组件的this.props.children
,这时是undefined
。
因此,通常会采用{this.props.children || <Home/>}
这样的写法。这时,Home
明明是Accounts
和Statements
的同级组件,却没有写在Route
中。
IndexRoute
就是解决这个问题,显式指定Home
是根路由的子组件,即指定默认情况下加载的子组件。你可以把IndexRoute
想象成某个路径的index.html
。
<Router><Route path="/" component={App}><IndexRoute component={Home}/><Route path="accounts" component={Accounts}/><Route path="statements" component={Statements}/></Route> </Router>
现在,用户访问/
的时候,加载的组件结构如下。
<App><Home/> </App>
这种组件结构就很清晰了:App
只包含下级组件的共有元素,本身的展示内容则由Home
组件定义。这样有利于代码分离,也有利于使用React Router提供的各种API。
注意,IndexRoute
组件没有路径参数path
。
六、Redirect 组件
<Redirect>
组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由。
<Route path="inbox" component={Inbox}>{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}<Redirect from="messages/:id" to="/messages/:id" /> </Route>
现在访问/inbox/messages/5
,会自动跳转到/messages/5
。
七、IndexRedirect 组件
IndexRedirect
组件用于访问根路由的时候,将用户重定向到某个子组件。
<Route path="/" component={App}><IndexRedirect to="/welcome" /><Route path="welcome" component={Welcome} /><Route path="about" component={About} /> </Route>
上面代码中,用户访问根路径时,将自动重定向到子组件welcome
。
八、Link
Link
组件用于取代<a>
元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是<a>
元素的React 版本,可以接收Router
的状态。
render() { return <div> <ul role="nav"> <li><Link to="/about">About</Link></li> <li><Link to="/repos">Repos</Link></li> </ul> </div> }
如果希望当前的路由与其他路由有不同样式,这时可以使用Link
组件的activeStyle
属性。
<Link to="/about" activeStyle={{color: 'red'}}>About</Link> <Link to="/repos" activeStyle={{color: 'red'}}>Repos</Link>
上面代码中,当前页面的链接会红色显示。
另一种做法是,使用activeClassName
指定当前路由的Class
。
<Link to="/about" activeClassName="active">About</Link> <Link to="/repos" activeClassName="active">Repos</Link>
上面代码中,当前页面的链接的class
会包含active
。
在Router
组件之外,导航到路由页面,可以使用浏览器的History API,像下面这样写。
import { browserHistory } from 'react-router'; browserHistory.push('/some/path');
九、IndexLink
如果链接到根路由/
,不要使用Link
组件,而要使用IndexLink
组件。
这是因为对于根路由来说,activeStyle
和activeClassName
会失效,或者说总是生效,因为/
会匹配任何子路由。而IndexLink
组件会使用路径的精确匹配。
<IndexLink to="/" activeClassName="active">Home </IndexLink>
上面代码中,根路由只会在精确匹配时,才具有activeClassName
。
另一种方法是使用Link
组件的onlyActiveOnIndex
属性,也能达到同样效果。
<Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home </Link>
实际上,IndexLink
就是对Link
组件的onlyActiveOnIndex
属性的包装。
十、histroy 属性
Router
组件的history
属性,用来监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。
history
属性,一共可以设置三种值。
- browserHistory
- hashHistory
- createMemoryHistory
如果设为hashHistory
,路由将通过URL的hash部分(#
)切换,URL的形式类似example.com/#/some/path
。
import { hashHistory } from 'react-router'render( <Router history={hashHistory} routes={routes} />, document.getElementById('app') )
如果设为browserHistory
,浏览器的路由就不再通过Hash
完成了,而显示正常的路径example.com/some/path
,背后调用的是浏览器的History API。
import { browserHistory } from 'react-router'render( <Router history={browserHistory} routes={routes} />, document.getElementById('app') )
但是,这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由,会显示网页找不到的404错误。
如果开发服务器使用的是webpack-dev-server
,加上--history-api-fallback
参数就可以了。
$ webpack-dev-server --inline --content-base . --history-api-fallback
createMemoryHistory
主要用于服务器渲染。它创建一个内存中的history
对象,不与浏览器URL互动。
const history = createMemoryHistory(location)
十一、表单处理
Link
组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?
下面是一个表单。
<form onSubmit={this.handleSubmit}><input type="text" placeholder="userName"/><input type="text" placeholder="repo"/><button type="submit">Go</button> </form>
第一种方法是使用browserHistory.push
import { browserHistory } from 'react-router'// ... handleSubmit(event) { event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path) },
第二种方法是使用context
对象。
export default React.createClass({ // ask for `router` from context contextTypes: { router: React.PropTypes.object }, handleSubmit(event) { // ... this.context.router.push(path) }, })
十二、路由的钩子
每个路由都有Enter
和Leave
钩子,用户进入或离开该路由时触发。
<Route path="about" component={About} /> <Route path="inbox" component={Inbox}><Redirect from="messages/:id" to="/messages/:id" /> </Route>
上面的代码中,如果用户离开/messages/:id
,进入/about
时,会依次触发以下的钩子。
/messages/:id
的onLeave
/inbox
的onLeave
/about
的onEnter
下面是一个例子,使用onEnter
钩子替代<Redirect>
组件。
<Route path="inbox" component={Inbox}><Routepath="messages/:id"onEnter={({params}, replace) => replace(`/messages/${params.id}`)} /> </Route>
onEnter
钩子还可以用来做认证。
const requireAuth = (nextState, replace) => {if (!auth.isAdmin()) {// Redirect to Home page if not an Adminreplace({ pathname: '/' })} } export const AdminRoutes = () => {return (<Route path="/admin" component={Admin} onEnter={requireAuth} />) }
下面是一个高级应用,当用户离开一个路径的时候,跳出一个提示框,要求用户确认是否离开。
const Home = withRouter( React.createClass({ componentDidMount() { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave ) }, routerWillLeave(nextLocation) { // 返回 false 会继续停留当前页面, // 否则,返回一个字符串,会显示给用户,让其自己决定 if (!this.state.isSaved) return '确认要离开?'; }, }) )
上面代码中,setRouteLeaveHook
方法为Leave
钩子指定routerWillLeave
函数。该方法如果返回false
,将阻止路由的切换,否则就返回一个字符串,提示用户决定是否要切换。
(完)
React-Router
React-router 解决问题:UI与URL解耦
问题:原始同一个界面内部使用 a 进行跳转,不同界面中使用 # hash 跳转。如果在React框架下,对于SPA,需要获取界面的 hash 再判断界面中加载什么部分(setState),这样效率低下,UI 与 URL 不分离。
解决:首先使用 <Link to={path}>
作为超链接,点击后界面URL改变。React-touter 根据URL变化,不需要判断,直接根据 <Router><Component to={path}>
渲染部分内容,整体界面不会重新加载。
Link
原始HTML界面中,不同界面间进行切换,界面需要重载。
使用Link组件后,URL会更新,界面不需要重载,React组件会被重新渲染。
Link 组件通过 to 属性设置界面的切换。实际上,Link渲染成 A 标签,to属性可以作为href。Link 组件最终会渲染为 HTML 标签 ,它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接,但在内部实现上使用脚本拦截了浏览器的默认行为,然后调用了history.pushState 方法。
To 通常可以使字符串或者对象
<Link to="/about">关于</Link>
// 在当前URL的基础上增加一个/about<Link to="http://www.seafile.com/org/about" replace={true}></Link>
// replace 属性:true 表示用新的地址替换原始地址,false表示在旧地址上添加字符串。默认是false。<Link to={{pathname: '/about',search: '?name=name&password=123456',hash: '#content-1',state: { fromDashboard: true }
}} />
// 这样可以整体定位界面的属性
http://www.taodudu.cc/news/show-6451966.html
相关文章:
- React 入门实例教程(原作者: 阮一峰)
- React Hooks (一文看懂四个常用的钩子)
- 前端太卷了,累了
- Amazon SP-API文档看着累?那就看这里!
- 打工人的疲劳和压力,别人不懂 AI 懂
- 秋招能有多卷?看完这篇文章你就懂了
- 搞不懂SDN?那是因为你没看这个小故事…
- 不懂带团队,你就自己累!教你如何成为顶尖管理者!
- SuperMap iClient3D for WebGL教程(Entity)-ModelGraphics
- candidate key, primary key, superkey的区别
- keyProperty、useGeneratedKeys和keyColumn
- 主键(primary key)的设置和添加
- mybatis的primaryKey问题
- [Mysql] primary key 简明
- PRIMARY KEY
- PRIMARY KEY,key,unique key
- 有关primary key 和 foreign key
- MySQL主键(primary key)的作用
- primary key 主键
- 关于primarykey 和key的注意事项
- Duplicate entry for key 'PRIMARY'
- [MySQL] PRIMARY KEY 主键
- 关于Primary key
- key与PRIMARY KEY区别
- SQL中primary key的作用
- 电气设计参考图纸,有高低压电气设计图纸、自控设计图纸和污水处理工程电气自控图
- 免费在线基本电气图 + 示例
- 《电气图用图形符号》
- 电气设备绝缘在线监测系统的原理
- 写给初学者:电气制图规范和图纸识读方法——第二期
阮一峰 React Router 教程相关推荐
- 阮一峰 react 系列教程
阮一峰 react 系列教程 阮一峰 react 系列教程 ES6 语法:教程 Babel:教程 React:教程,示例库 Webpack:教程 React 项目脚手架:代码库 Flex 布局:教程, ...
- 阮一峰react入门笔记
1.造树.type=text/babel,逗号分离 2.jsx语法(遇到HTML标签(以 < 开头),就用HTML规则解析:遇到代码块(以 { 开头),就用JavaScript规则解析). 函 ...
- react router教程
react router教程 文章目录 react router教程 1:安装 2:配置路由 3:添加一个新页面测试路由 4:配置未找到的路由 5:跳转页面 5.1:通过 js 5.2:通过 dom ...
- react入门(1)之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 1.HTML模板 <!DOCTYPE html> <html><head>// re ...
- 阮一峰 python_React Router 使用教程(阮一峰)
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
- React Router教程–如何使用代码示例渲染,重定向,切换,链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
- 学习笔记“阮一峰 Redux 入门教程(一):基本用法”
目录 1.基本概念 Redux的诞生: Redux定义.作用: Store : State: Action: Action Creator: store.dispatch(): Reducer: st ...
- 阮一峰react demo代码研究的学习笔记 - React.createElement
Created by Wang, Jerry, last modified on Feb 20, 2016 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- 阮一峰react demo代码研究的学习笔记 - ReactMount.render
Created by Wang, Jerry, last modified on Feb 20, 2016 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
最新文章
- 对外星智能的搜索得到了重大的升级
- 领度CEO廖睿:企业社交最大的阻力来自老板
- python有趣代码-你都知道哪些有趣的Python代码?
- CentOS下MongoDB的升级
- STL之优先级队列priority_queue
- [Cocos2d-x For WP8]DrawPrimitives画图
- js中继承的几种用法总结(apply,call,prototype)
- 调试Excel VBA代码
- 互联网日报 | TikTok将开启Pre-IPO融资;菜鸟裹裹战略再升级;滴滴中国西区总部落户重庆江北...
- Segment Descriptors, Code- and Data-Segment Descriptor Types
- 经典排序算法总结与Python实现(上)
- idea 调试 js
- python consul服务发现_consule服务注册和发现 安装 部署
- Mysql的跨表更新
- Salesforce入门教程(中文)-020 VF使用静态资源移动端开发(未完)
- 戴尔服务器重装系统优盘启动不了怎么办,戴尔电脑重装系统识别不了u盘怎么办...
- 404 not found是什么意思
- 【PyTorch】保存和载入模型的两种方法
- 瑞吉外卖项目剩余功能补充
- APS高级计划排程系统,工厂各部门实施前后有哪些区别?