React Router v4 学习笔记

React Router现在已经是React开发单页应用必备技能,自升级V4版本以来,许多核心API都进行了重写,践行路由即组件的概念,本文是我学习React Router V4以来的一些总结。

介绍

React-Router V4是react-router的一次重大更新,许多核心API都已改变,使用react-router4不需要对路由进行集中式配置,react-router 4的核心是一切皆组件。

react-router 4一共被拆分为三个包:react-router、react-router-dom、react-router-native,react-router提供了React Router的核心路由功能,包括Router, Route, Switch等,但是我们不会直接使用它。react-router-dom和react-router-native提供在特定运行环境下的路由组件。如果你需要开发在浏览器中运行的Web应用,则应该安装react-router-dom。同样,如果你需要开发React Native应用程序,则应该安装react-router-native。这两者都将安装react-router作为依赖项。

react-router-dom

react-router使用react-router-dom作为浏览器端的路由,提供了BrowserRouter,Route,Link等api,通过DOM的事件控制路由。在Web开发过程中,我们更多是使用react-router-dom。本文的讨论也仅限于react-router-dom。

安装

npm install react-router-dom --save
复制代码

使用

Router

react-router4的使用首先需要选择Router,Router用于包裹在应用最外层。Router有两种类型:HashRouter和BrowserRouter,其表现方式也有所不同,使用时需要区分。

HashRouter与BrowserRouter

从表面区分HashRouter和BrowserRouter的方法就是HashRouter的url中有个#,例如localhost:3000/#,HashRouter通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。

BrowserRouter的url中没有#,它的url如http://localhost:3001/user/login,BrowserRouter的原理是依赖HTML5的history API实现的路由机制。

HashRouter和BrowserRouter都具有basename属性,如果你的URL不是位于网站根目录,而是放在子目录里,你需要设置这个属性。如下:

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // 渲染为 <a href="/calendar/today">
复制代码

Route Route是Router的子元素,控制路径对应显示的组件。常用属性有exact、path以及component。 考虑以下代码:

<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
复制代码

react-router4的路由是包含性的,多个Route可以同时进行匹配和渲染,exact控制到路径匹配成功时不会再继续向下匹配,在面代码中,我们试图根据路径渲染 HomePage 或者 UsersPage。如果从Route删除了 exact 属性,那么在浏览器中访问 /users 时,HomePage 和 UsersPage 组件将同时被渲染。

Switch

在Router组件中的任意位置创建多个,但通常我们会把它们放在同一个位置。使用组件来包裹一组。会遍历自身的子元素(即路由)并对第一个匹配当前路径的元素进行渲染。考虑如下代码:

<Switch>
  <Route exact path="/" component={DashBoard} />
  <Route path="/user" component={User} />
</Switch>
复制代码

如果去掉Switch组件,当我们访问/user的时候,路由会同时匹配“/”和/user,将同时渲染DashBoard和User组件。

Link vs NavLink

react-router4提供了两种导航API,用于页面切换,当页面切换时,页面不会重新加载,但是组件会被重新渲染。它们作用相同,但NavLink在匹配URL成功时,可以提供一些额外的样式能力。

Link

Link提供to属性控制跳转地址,可传入字符串或者对象。如下:

<Link to="/courses"/>to: object
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
复制代码

NavLink

NavLink可以给当前匹配成功的链接提供一个className类名,常在Tab导航中使用。

<nav>
  <NavLinkto="/app"exact activeClassName="active">Home</NavLink>
  <NavLinkto="/app/users"activeClassName="active">Users</NavLink>
  <NavLinkto="/app/products"activeClassName="active">Products</NavLink>
</nav>
复制代码

路径参数 在react router4中,match用于获取路径上的参数,match是使用渲染时传递到组件内的一个props,在react组件内部通过this.props.match获取match的属性, 考虑如下代码:

<Switch>
  <Route exact path="/" component={DashBoard} />
  <Route path="/user/:id" component={User} />
  <Route path="/user" component={User} />
</Switch>
复制代码

当访问http://localhost:3001/user/123时,打印this.props.match的内容。 match获取的属性主要有:

然后,通过this.props.match.params.id就可以获取路由匹配的id了。

withRouter

试想,如果组件没有通过渲染,该如何获取history、match、location等props呢?react router4提供了一个高阶组件withRouter。使用方法如下:

import { withRouter } from 'react-router-dom';
复制代码

使用withRouter有两种办法,第一种简洁的方法是使用装饰器,如下:

@withRouter
class AuthRoute extends React.Component {
}
复制代码

另一种方法直接调用withRouter包裹原来的组件返回一个新的组件:

class Auth extends React.Component {

}
const AuthRoute = withRouter(Auth)
复制代码

通过以上两种方法,就能在组件内部使用路由的props了。如下:

const { match,location,history} = this.props;
复制代码

结语

关于react router4,本文只是讲解了一些常用的api和用法,需要学习的还有很多,这里只是开始。

参考

react router 官方文档

本文原发于我的博客:http://yanyuanfe.cn/2018/02/02/React%20Router%20V4%20%E5%85%A5%E9%97%A8/

转载于:https://juejin.im/post/5a9ca1c46fb9a028e25d0945

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值