React路由管理之React Router总结

React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。

React Router是做什么的呢,官方的介绍是:

A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。

下面是一些React Router的用法:

一 简单渲染Route

有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。

// ...
import { Router, Route, hashHistory } from 'react-router'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

这里使用了hashHistory - 它管理路由历史与URL的哈希部分。

添加更多的路由,并指定它们对应的组件

import About from './modules/About'
import Repos from './modules/Repos'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))

二 Link

// modules/App.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return (
   <div>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </div>
  )
 }
})

这里使用了Link 组件,它可以渲染出链接并使用 to 属性指向相应的路由。

三 嵌套路由

如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。

实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:

<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>

因此,可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享:

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

接下来,在App中将children渲染出来:

// modules/App.js
// ...
 render() {
  return (
   <div>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>

    {/* 注意这里将子组件渲染出来 */}
    {this.props.children}

   </div>
  )
 }
// ...

四 有效链接

Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。

<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>

可以使用 activeStyle 指定有效链接的样式,也可以使用activeClassName指定有效链接的样式类。

大多数时候,我们并不需要知道链接是否有效,但在导航中这个特性则十分重要。比如:可以在导航栏中只显示合法的路由链接。

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})
// modules/App.js
import NavLink from './NavLink'

// ...

<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

可以在NavLink中指定只有 .active 的链接才显示,这样如果路由无效,则该链接就不会出现在导航栏中了。

五 URL参数

考虑下面的url:

/repos/reactjs/react-router
/repos/facebook/react

他们可能对应的是这种形式:

/repos/:userName/:repoName

:后面是可变的参数

url中的可变参数可以通过 this.props.params[paramsName] 获取到:

// modules/Repo.js
import React from 'react'

export default React.createClass({
 render() {
  return (
   <div>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
    <h2>{this.props.params.repoName}</h2>
   </div>
  )
 }
})
// index.js
// ...
// import Repo
import Repo from './modules/Repo'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意这里的路径 带了 :参数 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。

六 默认路由

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'

// ...

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>

   {/* 注意这里* /}
   <IndexRoute component={Home}/>

   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。

同理也有 默认链接组件 IndexLink。、

七 使用Browser History

前面的例子一直使用的是hashHistory,因为它一直可以运行,但更好的方式是使用Browser History,它可以不依赖哈希端口 (#)。

首先需要改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

其次需要 修改webpack的本地服务配置,打开 package.json 添加 –history-api-fallback :

代码如下:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 index.html中 将文件的路径改为相对路径:

<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >

<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>

这样就去掉了url中的 # 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • React从react-router路由上做登陆验证控制的方法
  • 详解React-Router中Url参数改变页面不刷新的解决办法
  • react router4+redux实现路由权限控制的方法
  • React Router v4 入坑指南(小结)
  • 在react-router4中进行代码拆分的方法(基于webpack)
  • react-router4 配合webpack require.ensure 实现异步加载的示例
  • react-router v4如何使用history控制路由跳转详解
  • 关于react-router/react-router-dom v4 history不能访问问题的解决
  • 详解react-router 4.0 下服务器如何配合BrowserRouter
(0)

相关推荐

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

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

  • react-router v4如何使用history控制路由跳转详解

    前言 距离React Router v4 正式发布也已经挺久了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • react-router4 配合webpack require.ensure 实现异步加载的示例

    实现异步加载的方法,归根结底大都是根据webpack的require.ensure来实现 第一个是自己使用require.ensure实现, 第二种 使用loader实现 今天我们说的是使用bundle-loader来实现,这样代码更优雅些. 首先需要安装bundle-loader ,具体使用npm还是yarn,就看你的包管理使用的是啥了. 下面需要一个bundle.js import React, { Component } from 'react'; export default class

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

  • 关于react-router/react-router-dom v4 history不能访问问题的解决

    前言 最近把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history  找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊,国内知识都是你复制我的,我复制你的,都特么垃圾.只能去Google, 最终找到了答案:(看代码一目了然) 解决方法 首先使用router import React, { Component } from 'react'; impo

  • React Router v4 入坑指南(小结)

    距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • 在react-router4中进行代码拆分的方法(基于webpack)

    前言 随着前端项目的不断扩大,一个原本简单的网页应用所引用的js文件可能变得越来越庞大.尤其在近期流行的单页面应用中,越来越依赖一些打包工具(例如webpack),通过这些打包工具将需要处理.相互依赖的模块直接打包成一个单独的bundle文件,在页面第一次载入时,就会将所有的js全部载入.但是,往往有许多的场景,我们并不需要在一次性将单页应用的全部依赖都载下来.例如:我们现在有一个带有权限的"订单后台管理"单页应用,普通管理员只能进入"订单管理"部分,而超级用户则可

  • 详解react-router 4.0 下服务器如何配合BrowserRouter

    react-router作为react框架路由解决方案在react项目中举足轻重. 在react-router 4.0版本中,API与先前版本相比有了很大的修改,在2.0.3.0中常用的<Router>组件作为路由底层配置组件不再常用,取而代之的是四个各有不同的路由组件: <BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter> 其中<MemoryRouter>组件在内

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

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

  • React路由管理之React Router总结

    React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dy

  • 浅谈Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

  • React Native自定义路由管理的深入理解

    目录 1.自定义路由 2.Tab导航 3.数据回传 总结 1.自定义路由 众所周知,不管是在原生Android还是iOS,它们都有一个默认的路由路由栈管理类.由于React Native官方没有提供路由管理的组件,所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由. Stack.Navigator使用的命名路由,所谓命名路由,指的是路由需要先声明然后才能使用.为了方便管理路由页面,我们会将路由放到一个统一的位置,比如screens包下,如下所示

  • React路由鉴权的实现方法

    前言 上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的. 背景 单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面.虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了.有时候是通过SESSIONID来校验登陆权限的. 在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的: 一.

  • react 路由权限动态菜单方案配置react-router-auth-plus

    目录 正文 如何使用 1. 配置路由 2. 在应用的最外层渲染路由 权限说明 动态菜单 正文 在 react 中做路由权限管理,一直是比较麻烦的事,不像 vue 中有进入路由前拦截的功能.在摸鱼时间撸了一个傻瓜式配置的路由权限 library (基于 react-router v6). react-router v6 文档地址 react-router-auth-plus github 地址 如何使用 1. 配置路由 import { AuthRouterObject } from "react

  • React路由封装的实现浅析

    目录 了解SAP和路由的概念 再说说路由 路由封装流程 了解SAP和路由的概念 SAP(single page web application)的意思是单页Web应用,正如前言所说,一般来说功能较为复杂都会涉及到页面跳转的功能,而传统的前端页面跳转往往是利用<a/>标签进行跳转,这种方式虽然可以实现功能,但是每次跳转到新的页面都会重新对页面的元素进行加载,这样其实对于用户来说是不太友好的.而单页Web应用则较好的解决了这个问题,因为SAP整个应用都是在一个页面上进行的,每次的页面跳转只涉及到页

  • Vue 项目迁移 React 路由部分经验分享

    目录 引言 Vue Router: React Router V5: 升级到 React Router V6 引言 最近在把 Vue2.6 的老项目代码迁移到 React,以便统一技术栈更好维护. 首先遇到的难点和思维模式上的转变是:路由的迁移问题.Vue Router 迁移到 React Router,需要怎么支持嵌套的路由? 直观感觉它们之间的异同: Vue Router: 默认使用字面量对象指定路由配置(children 属性嵌套子路由配置); 视图上使用 <router-view/>

  • react路由配置方式详解

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

  • 无废话快速上手React路由开发

    安装 输入以下命令进行安装: // npm npm install react-router-dom // yarn yarn add react-router-dom react-router相关标签 react-router常用的组件有以下八个: import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, NavLink, withRouter, } from 'react-router-dom' 简单路由跳转 实现一

  • 五分钟教你了解一下react路由知识

    目录 什么是路由 纯组件的基本使用 纯组件使用的注意点 路由的基本初体验 HashRouter和BrowserRouter Link组件和NavLink组件 Route和Switch组件 路由传参 什么是路由 简单的说就是根据不同的地址,web服务器处理不同的业务以及逻辑. 以下代码全部运行在react脚手架中 纯组件的基本使用 // 组件更新机制: // 只要父组件重新渲染了, 所有的组件子树, 也会更新 // 性能优化 // 1. 减轻state // 2. 避免不必要的重新渲染 (性能优化

随机推荐