简单谈谈React中的路由系统

React中的路由系统

提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面。前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL。本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL。

react-router的最新版本是v4.1.1,由于4.0版本和之间的版本API变化较大,所以本篇文章的内容并不能应用到之前的版本中。

要注意 react-router 有 react-router-dom 和 react-router-native 的区别。前者是用于开发WEB应用的,而后者适用于移动APP的,本文所介绍的是react-router-dom。

react-router 中的三大组件

react-router中的组件就是react中的组件,只不过它们被添加了一些特殊的逻辑而已。

Router Router相当于一个容器,不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同,Router还分为BrowserRouter,MemoryRouter等。

pnk pnk被渲染称一个a标签,通常以声明式的方式被定义在应用程序中。

Route Route包含一个path,并指明了在path与URL匹配时要渲染的组件。

Router

如果说我们的应用程序是一座小城的话,那么Route就是一座座带有门牌号的建筑物,而pnk就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错Router就是这个老司机。

先来说一说BrowserRouter。BrowserRouter主要使用在浏览器中,也就是WEB应用中(废话,看名字就知道了)。它利用HTML5 的history API来同步URL和UI的变化。当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route,并将他们渲染出来。 既然BrowserRouter是用来管理我们的组件的,那么它当然要被放在最顶级的位置,而我们的应用程序的组件就作为它的一个子组件而存在。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
 <BrowserRouter>
  <App/>
 </BrowserRouter>,
 document.body);

有时候我们的应用只是整个系统中的一个模块,比如一个使用了ASPNET MVC中的area的后台管理模块,应用中的URL总是以 http://localhost/admin/ 开头。这种情况下我们总不能每次定义pnk和Route的时候都带上admin吧?react-router已经考虑到了这种情况,所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后,pnk中就可以省略掉admin了,而最后渲染出来的URL又会自动带上admin。

<BrowserRouter basename="/admin"/>
 ...
 <pnk to="/home"/> // 被渲染为 <a href="/admin/home" rel="external nofollow" >
 ...
</BrowserRouter>

对于WEB应用,BrowserRouter是我们的首选。但是这里还有一些Browser Router其他的兄弟姐妹,在其他的一些情况下你或许会用得到。

HashRouter 这个内部使用window.location.hash,由于这里存在一些问题,因此官方推荐使用BrowserRouter来替代。

MemoryRouter 主要用在ReactNative这种非浏览器的环境中,因此直接将URL的history保存在了内存中。

StaticRouter 主要用于服务端渲染。

Link

Link就像是一个个的路牌,为我们指明组件的位置。pnk使用声明式的方式为应用程序提供导航功能,定义的Link最终会被渲染成一个a标签。pnk使用to这个属性来指明目标组件的路径,可以直接使用一个字符串,也可以传入一个对象。

// 字符串参数
<pnk to="/query">查询</pnk>

// 对象参数
<pnk to={{
 pathname: '/query',
 search: '?key=name',
 hash: '#hash'
}}>查询</pnk>

Link提供的功能并不多,好在我们还有Navpnk可以选择。Navpnk是一个特殊版本的Link,可以使用activeClassName来设置pnk被选中时被附加的class,使用activeStyle来配置被选中时应用的样式。此外,还有一个exact属性,此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。

// 选中后被添加class selected
<Navpnk to={'/'} exact activeClassName='selected'>Home</Navpnk>
// 选中后被附加样式 color:red
<Navpnk to={'/gallery'} activeStyle={{color:red}}>Gallery</Navpnk>

Route

Route应该是react-route中最重要的组件了,它的作用是当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配,那么这些Route的Component都会被渲染。

与pnk类似,Route也有一个exact属性,作用也是要求location与Route的path绝对匹配。

// 当location形如 http://location/时,Home就会被渲染。
// 因为 "/" 会匹配所有的URL,所以这里设置一个exact来强制绝对匹配。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>

Route的三种渲染方式

component

这是最常用也最容易理解的方式,给什么就渲染什么。

render

render的类型是function,Route会渲染这个function的返回值。因此它的作用就是附加一些额外的逻辑。

<Route path="/home" render={() => {
 console.log('额外的逻辑');
 return (<div>Home</div>);
 }/>

children

这是最特殊的渲染方式。一、它同render类似,是一个function。不同的地方在于它会被传入一个match参数来告诉你这个Route的path和location匹配上没有。二、第二个特殊的地方在于,即使path没有匹配上,我们也可以将它渲染出来。秘诀就在于前面一点提到的match参数。我们可以根据这个参数来决定在匹配的时候渲染什么,不匹配的时候又渲染什么。

// 在匹配时,容器的calss是pght,<Home />会被渲染
// 在不匹配时,容器的calss是dark,<About />会被渲染
<Route path='/home' children={({ match }) => (
 <div className={match ? 'pght' : 'dark'}>
 {match ? <Home/>:<About>}
 </div>
 )}/>

所有路由中指定的组件将被传入以下三个props。

match.
location.
history.

这里主要说下match.params.透过这个属性,我们可以拿到从location中解析出来的参数。当然,如果想要接收参数,我们的Route的path也要使用特殊的写法。

如下示例,三个pnk是一个文章列表中三个链接,分别指向三篇id不同的文章。而Route用于渲染文章详情页。注意path='/p/:id' ,location中的对应的段会被解析为id=1 这样的键值。最终这个键值会作为param的键值存在。Route中的组件可以使用this.props.match.params.id来获取,示例中使用了结构赋值。

<pnk to='/p/1' />
<pnk to='/p/2' />
<pnk to='/p/3' />

......

<Route path='/p/:id' render={(match)=<h3>当前文章ID:{match.params.id}</h3>)} />

Redirect

当这个组件被渲染是,location会被重写为Redirect的to指定的新location。它的一个用途是登录重定向,比如在用户点了登录并验证通过之后,将页面跳转到个人主页。

<Redirect to="/new"/>

Router中常用的组件基本上都介绍了一遍,不过也只是蜻蜓点水而已。如果想更透彻的理解路由系统,建议还是去翻看官方文档并且试着去用一用。文中给出的示例也是非常精简的片段,仅仅作为参考。

以上这篇简单谈谈React中的路由系统就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-07-22

react-router JS 控制路由跳转实例

Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <

react路由配置方式详解

本文介绍了react路由配置,最近刚开始学,分享给大家,顺便给自己留个笔记. 包含了LInk跳转以及js触发跳转并传参. 这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的. 按照顺序来写:detail文件夹下的代码 import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail

详解react如何在组件中获取路由参数

路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li

react-router4 嵌套路由的使用方法

react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记 先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH

vue-router:嵌套路由的使用方法

模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

react router4+redux实现路由权限控制的方法

总体概述 一个完善的路由系统应该是这样子的,当链接到的组件是需要登录后才能查看,要能够跳转到登录页,然后登录成功后又跳回来之前想访问的页面.这里主要是用一个权限控制类来定义路由路由信息,同时用redux把登录成功后要访问的路由地址给保存起来,登录成功时看redux里面有没有存地址,如果没有存地址就跳转到默认路由地址. 路由权限控制类 在这个方法里面,通过sessionStorage判断是否登录了,如果没有登录,就保存一下当前想要跳转的路由到redux里面.然后跳转到我们登录页. import R

React从react-router路由上做登陆验证控制的方法

本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下: 验证代码 import React from 'react' import {connect} from 'react-redux'; function requireAuthentication(Component) { // 组件有已登陆的模块 直接返回 (防止从新渲染) if (Component.AuthenticatedComponent) { return Component.Authe

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

vue嵌套路由与404重定向实现方法分析

本文实例讲述了vue嵌套路由与404重定向实现方法.分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的

vue 刷新之后 嵌套路由不变 重新渲染页面的方法

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

vue2路由方式--嵌套路由实现方法分析

本文实例讲述了vue2嵌套路由实现方法.分享给大家供大家参考,具体如下: 前面讲过了vue2路由基本用法,一般应用中的路由方式不会像上述例子那么简单,往往会出现二级导航这种情况.这时就需要使用嵌套路由这种写法. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8"

利用React Router4实现的服务端直出渲染(SSR)

我们已经熟悉React 服务端渲染(SSR)的基本步骤,现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构.毕竟大多数的应用都需要用到web前端路由器,所以要让SSR能够正常的运行,了解路由器的设置是十分有必要的 基本步骤 路由器配置 前言已经简单的介绍了React SSR,首先我们需要添加ReactRouter4到我们的项目中 $ yarn add react-router-dom # or, using npm $ npm install react-router

详解vue嵌套路由-query传递参数

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo