React Router基本用法

huhud 发布于2019-08-22 10:59 / 1310人阅读

摘要：本文同步自我的博客，欢迎移步前往，概览本文基于版本。这样的做法虽然看起来很简单，但是也增加了复杂性。总结基本用法大概就这么多一个应用往往是各种组件各种嵌套，搞明白了，就可以很轻松的玩转路由。

本文同步自我的博客 Reeoo"s Blog，欢迎移步前往，^_^

概览

本文基于React Router v1.03版本。

React Router是一个为React设计的强大的路由库。可以帮助我们快速的实现路由功能，包括URL和React components之间的同步映射关系。
在解释React Router如何使用之前，我们先来看看在不使用React Router的情况下，是怎么样的，接下来的所有例子中都将使用ES2015语法和语言特性。

不使用React Router

import React from "react"
import { render } from "react-dom"

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
getInitialState() {
  return {
    route: window.location.hash.substr(1)
  }
},

componentDidMount() {
  window.addEventListener("hashchange", () => {
    this.setState({
      route: window.location.hash.substr(1)
    })
  })
},

render() {
  let Child
  switch (this.state.route) {
    case "/about": Child = About; break;
    case "/inbox": Child = Inbox; break;
    default:      Child = Home;
  }

  return (
    
      App
      
        About
        Inbox
      
      
    
  )
}
})

render(, document.body)

当hash值变化的时候，App 将会根据this.state.route 的值决定渲染哪个组件（About、Index、Home）到页面上。这样的做法虽然看起来很简单，但是也增加了复杂性。

想象一下，如果组件 Inbox 有一些嵌套的子组件，它们的路由规则可能是这样的：/inbox/message/12345 或者 /inbox/unread 这样的，
上面的路由匹配规则很显然就不能满足我们的需求了，我们不得不修改之前的URL解析规则，写一堆复杂的代码来判断哪种URL应该呈现哪个组件（比如：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats）。

使用React Router

首先，引入React Router

import React from "react"
import { render } from "react-dom"
import { Router, Route, Link } from "react-router"

把判断路由逻辑的那段代码删除，然后加入Link标签

const App = React.createClass({
  render() {
    return (
      
        App
        {/* 把`a`标签换成`Link`标签 */}
        
          About
          Inbox
        

        {/*
          把``替换成`this.props.children`
          路由会渲染正确的组件
        */}
        {this.props.children}
      
    )
  }
})

最后引入和，由它们帮我们搞定路由。

render((
  
    
      
      
    
  
), document.body)

React Router知道哪种URL规则下，渲染哪个组件到页面上，不需要我们自己在做任何的判断。
例如：/about这种URL规则，会被构建成
在React Router内部，会把标签层级转换成路由配置。如果你不喜欢jsx的这种写法，也可以使用对象的形式：

const routes = {
  path: "/",
  component: App,
  childRoutes: [
    { path: "about", component: About },
    { path: "inbox", component: Inbox },
  ]
}

render(, document.body)

添加更多的视图

OK，现在在inbox路由下嵌套一个messages子路由，
首先需要添加一个新的Message组件：

const Message = React.createClass({
  render() {
    return Message
  }
})

然后在原有的inbox路由下面为 Message 组件添加新的路由，这样就可以得到嵌套的组件。

const Inbox = React.createClass({
  render() {
    return (
      
        Inbox
        {/* 渲染子组件 */}
        {this.props.children}
      
    )
  }
})

render((
  
    
      
      
        {/* 在这里加入要嵌套的视图 */}
        {/* render the stats page when at `/inbox` */}
        
        {/* 渲染message组件  /inbox/messages/123 */}
        
      
    
  
), document.body)

访问inbox/messages/12345会匹配新加的路由，App->Inbox->Message,路由层级：

访问/inbox，路由层级：

获取参数

当我们访问inbox/messages/12345的时候，我们需要获取到相应的参数，然后从服务器获取对应的数据。当视图渲染的时候，路由组件会注入一些有用的属性到组件上，特别是一些从URL动态获取的参数信息，在我们这个示例里是：id

const Message = React.createClass({

  componentDidMount() {
    // from the path `/inbox/messages/:id`
    const id = this.props.params.id

    fetchMessage(id, function (err, message) {
      this.setState({ message: message })
    })
  },

  // ...

})

你也可以通过查询串来获取参数，假如我们在浏览器里面访问/foo?bar=baz这个路由,在你的组件中可以通过this.props.location.query.bar获取bar的值baz。

总结

React Router基本用法大概就这么多,一个应用往往是各种组件各种嵌套，搞明白了React Router，就可以很轻松的玩转路由。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91586.html

react-router @4用法整理

摘要：官方文档源码这篇文章主要介绍了的基本用法包括动态路由编程式导航等安装用法动态路由的基本用法编程式导航总结安装用法示例代码关于路由重定向使用的格式注意位置需要在定义路由的后面比如重定向就需要写在后面关于路由匹配默认写在路由末尾前 router@4 react-router@4官方文档 github源码这篇文章主要介绍了react-router@4的基本用法,包括动态路由,编程式...

piglei 2019-08-21 17:52 评论0 收藏0
react-router-dom v^4学习历程（一）

摘要：用于精准匹配路径，不用也会匹配到匹配的路径的子路径，这样两个路由组件都会显示。路径中传递参数到路由到的组件，就是在路径前面加上这样这个路由地址就会变成一个参数被组件接受到。例如可以获取到当前的基础路径。 react-router-dom的版本已经更新到了4.1.1，那么我们就一起来学习学习react v4这个新版路由的基本使用吧！在学习路由之前我们先需要复习几个基础知识，关于reac...

KevinYan 2019-08-20 16:25 评论0 收藏0
React Router 使用教程(阮一峰)

摘要：它是官方维护的，事实上也是唯一可选的路由库。表示的这个部分是可选的。另一种做法是，使用指定当前路由的。而组件会使用路径的精确匹配。否则用户直接向服务器请求某个子路由，会显示网页找不到的错误。真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 评论0 收藏0
React-Redux的用法

摘要：基本流程组件只接受数据包括出来的数据以及方法容器组件通过将返回的作为传入通过将作为传入通过方法将这两个方法与组件连接起来返回一个容器组件组件将所有组件分成两大类组件和容器组件组件有以下几个特征只负责的呈现不带有任何业务逻辑没有状态即不基本流程 1.UI组件Example,只接受this.props数据,包括reducer出来的数据state,以及dispatch方法.2.容器组件co...

leap_frog 2019-08-20 18:19 评论0 收藏0
React Native 常用的 15 个库

摘要：声明式用法只需使用动画的名称，该动画将在加载该元素时立即生效。实际案例这个库支持本地推送通知功能比较全面。实际案例具有缩放支持，回调，缩放以适应和滚动指示器支持的组件。这是图像上传或图像处理的基本库。本篇 React native 库列表不是从网上随便找的，这些是我在我的应用中亲自使用的库。这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。想阅读更...

Juven 2019-08-23 16:56 评论0 收藏0