首页 / REACT / ReactRouter知识的全面解析（代码示例）

ReactRouter知识的全面解析（代码示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ReactRouter知识的全面解析（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11958字，纯文字阅读大概需要18分钟。

内容图文

本篇文章给大家带来的内容是关于React Router知识的全面解析（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、前端路由和后端路由

1)后端路由

多页应用中，一个URL对应一个HTML页面，一个Web应用包含很多HTML页面，在多页应用中，页面路由控制由服务器端负责，这种路由方式称为后端路由。

多页应用中,每次页面切换都需要向服务器发送一次请求，页面使用到的静态资源也需要重新加载，存在一定的浪费。而且，页面的整体刷新对用户体验也有影响，因为不同页面间往往存在共同的部分，例如导航栏、侧边栏等，页面整体刷新也会导致共用部分的刷新。

2)前端路由

在单面应用中，URL发生并不会向服务器发送新的请求，所以“逻辑页面”的路由只能由前端负责，这种路由方式称为前端路由。

目前，国内的搜索引擎大多对单页应用的SEO支持的不好，因此，对于 SEO 非常看重的 Web
应用(例如，企业官方网站，电商网站等)，一般还是会选择采用多页面应用。React 也并非只能用于开发单页面应用。

二、React Router 安装

这里使用的 React Router 的大版本号是 v4, 这也是目前最新版本。

React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，实际使用，我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时， react-router 也会自动安装。
创建 Web应用，使用

npm install react-router-dom

创建 navtive 应用，使用

 npm install react-router-native

三、路由器

React Router 通过 Router 和 Route 两个组件完成路由功能。Router 可以理解成路由器，一个应用中需要一个 Router 实例，所有跌幅配置组件 Route 都定义为 Router 的子组件。在 Web应用中，我们一般会使用对 Router 进行包装的 BrowserRouter 或 HashRouter 两个组件 BrowserRouter使用 HTML5 的 history API（pushState、replaceState等）实现应用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 实现应用的 UI 和 URL 同步。

BrowserRouter 创建的 URL 形式如下：

http://example.com/some/path

HashRouter 创建的 URL 形式如下：

 http://example.com/#/some/path

使用 BrowserRouter 时，一般还需要对服务器进行配置，让服务器能正确地处理所有可能的URL。例如，当浏览器发生 http://example.com/some/path 和 http://example.com/some/path2 两个请求时，服务器需要能返回正确的 HTML 页面（也就是单页面应用中唯一的 HTML 页面）

HashRouter 则不存在这个问题，因为 hash 部分的内容会被服务器自动忽略，真正有效的信息是 hash 前端的部分，而对于单页应用来说，这部分是固定的。

Router 会创建一个 history 对象，history 用来跟踪 URL, 当URL 发生变化时， Router,的后代组件会重新渲染。React Router 中提供的其他组件可以通过 context 获取 history 对象，这也隐含说明了 React Router 中其他组件必须作为 Router 组件后代使用。但 Router 中只能唯一的一个子元素，例如：

// 正确
ReactDOM.render(
  (
  <BrowserRouter>
    <App />
  </BrowserRouter>),
  document.getElementById('root')
)
//错误，Router 中包含两个子元素
ReactDOM.render(
  (
    <BrowserRouter>
      <App1 />
      <App2 />
    </BrowserRouter>),
  document.getElementById('root')
)

四、路由器

Route 是 React Router中用于配置路由信息的组件，也是 React Router 中使用频率最高的组件。每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route。

1) path

每个 Route 都需要定义一个 path 属性，当使用 BrowserRouter 时，path 用来描述这个Router匹配的 URL 的pathname;当使用 HashRouter时，path 用来描述这个 Route 匹配的 URL 的 hash。例如，使用 BrowserRouter 时，<Route path=''foo' /> 会匹配一个 pathname 以 foo 开始的 URL （如: http://example.com/foo）。当 URL 匹配一个 Route 时，这个 Route 中定义的组件就会被渲染出来。

2)match

当 URL 和 Route匹配时，Route 会创建一个 match 对象作为 props 中的一个属性传递给被渲染的组件。这个对象包含以下4个属性。

（1）params: Route的 path 可以包含参数，例如 <Route path="/foo/:id" 包含一个参数 id。params就是用于从匹配的 URL 中解析出 path 中的参数，例如，当 URL = 'http://example.ocm/foo/1' 时，params= {id: 1}。

（2）isExact: 是一个布尔值，当 URL 完全匹时，值为 true; 当 URL 部分匹配时，值为 false.例如，当 path='/foo'、URL="http://example.com/foo" 时，是完全匹配; 当 URL="http://example.com/foo/1" 时，是部分匹配。

（3）path: Route 的 path 属性，构建嵌套路由时会使用到。

（4）url: URL 的匹配的方式

3)Route 渲染组件的方式

（1）component

component 的值是一个组件，当 URL 和 Route 匹配时，Component属性定义的组件就会被渲染。例如：

<Route path='/foo' component={Foo} >

当 URL = "http://example.com/foo" 时，Foo组件会被渲染。

(2) render
render 的值是一个函数，这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如：

<Route path='/foo' render={(props) => {
  <Foo {...props} data={extraProps} />
}}>
</Route>

Foo 组件接收了一个额外的 data 属性。

（3）children
children 的值也是一个函数，函数返回要渲染的 React 元素。与前两种方式不同之处是，无论是否匹配成功， children 返回的组件都会被渲染。但是，当匹配不成功时，match 属性为 null。例如:

<Route path='/foo' render={(props) => {
  <p className={props.match ? 'active': ''}>
    <Foo {...props} data={extraProps} />
  </p>
}}>
</Route>

如果 Route 匹配当前 URL，待渲染元素的根节点 p 的 class 将设置成 active.

4）Switch 和 exact

当URL 和多个 Route 匹配时，这些 Route 都会执行渲染操作。如果只想让第一个匹配的 Route 沉浸，那么可以把这些 Route 包到一个 Switch 组件中。如果想让 URL 和 Route 完全匹配时，Route才渲染，那么可以使用 Route 的 exact 属性。Switch 和 exact 常常联合使用，用于应用首页的导航。例如：

<Router>
 <Switch>
    <Route exact path='/' component={Home}/>
    <Route exact path='/posts' component={Posts} />
    <Route exact path='/:user' component={User} />
  </Switch>
</Router>

如果不使用 Switch,当 URL 的 pathname 为 "/posts" 时，<Route path='/posts' /> 和 <Route path=':user' /> 都会被匹配，但显然我们并不希望 <Route path=':user' /> 被匹配，实际上也没有用户名为 posts 的用户。如果不使用 exact， "/" "/posts" "/user1"等几乎所有 URL 都会匹配第一个 Route,又因为Switch 的存在，后面的两个 Route永远不会被匹配。使用 exact,保证只有当 URL 的 pathname 为 '/'时，第一个Route才会匹配。

5）嵌套路由

嵌套路由是指在Route 渲染的组件内部定义新的 Route。例如，在上一个例子中，在 Posts 组件内再定义两个 Route:

const Posts = ({match}) => {
  return (
    <p>
      {/* 这里 match.url 等于 /posts */}
      <Route path={`${match.url}/:id`} component={PostDetail} />
      <Route exact path={match.url} component={PostList} />
    </p>
  )
}

五、链接

Link 是 React Router提供的链接组件，一个 Link 组件定义了当点击该 Link 时，页面应该如何路由。例如：

const Navigation = () => {
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/posts'>Posts</Link></li>
      </ul>
    </nav>
  </header>
}

Link 使用 to 属性声明要导航到的URL地址。to 可以是 string 或 object 类型，当 to 为 object 类型时，可以包含 pathname、search、hash、state 四个属性，例如:

<Link to={{
  pathname: '/posts',
  search: '?sort=name',
  hash:'#the-hash',
  state: { fromHome: true}
}}>
</Link>

除了使用Link外，我们还可以使用 history 对象手动实现导航。history 中最常用的两个方法是 push(path,[state]) 和 replace(path,[state]),push会向浏览器记录中新增一条记录，replace 会用新记录替换记录。例如：

history.push('/posts');
history.replace('/posts');

六、路由设计

路由设计的过程可以分为两步：

为每一个页面定义有语义的路由名称(path)
组织 Route 结构层次

1）定义路由名称

我们有三个页面，按照页面功能不难定义出如下的路由名称：

登录页： /login
帖子列表页: /posts
帖子详情页: /posts/:id(id代表帖子的ID)

但是这些还不够，还需要考虑打开应用时的默认页面，也就是根路径"/"对应的页面。结合业务场景，帖子列表作为应用的默认页面为合适，因此，帖子列表对应两个路由名称: '/posts'和 '/'

2）组织 Route 结构层次

React Router 4并不需要在一个地方集中声明应用需要的所有 Route, Route实际上也是一个普通的 React 组件，可以在任意地方使用它（前提是，Route必须是 Router 的子节点）。当然，这样的灵活性也一定程度上增加了组织 Route 结构层次的难度。
我们先考虑第一层级的路由。登录页和帖子列表页(首页)应该属于第一层级：

<Router>
  <Switch>
    <Route exact path="/" component={Home}></Route>
    <Route exact path="/login" component={Login}></Route>
    <Route exact path="/posts" component={Home}></Route>
  </Switch>
</Router>

第一个Route 使用了 exact 属性，保证只有当访问根路径时，第一个 Route 才会匹配成功。Home 是首页对应组件，可以通过 "/posts" 和 “/” 两个路径访问首页。注意，这里并没有直接渲染帖子列表组件，真正渲染帖子列表组件的地方在 Home 组件内，通过第二层级的路由处理帖子列表组件和帖子详情组件渲染，components/Home.js 的主要代码如下：

class Home extends Component {
  /**省略其余代码 */
  render() {
    const {match, location } = this.props;
    const { username } = this.state;
    return(
      <p>
        <Header
          username = {username}
          onLogout={this.handleLogout}
          location = {location}
        >
        </Header>
        {/* 帖子列表路由配置 */}
        <Route
          path = {match.url}
          exact
          render={props => <PostList username={username} {...this.props}></PostList>}
        ></Route>
      </p>
    )
  }
}

Home的render内定义了两个 Route,分别用于渲染帖子列表和帖子详情。PostList 是帖子列表组件，Post是帖子详情组件，代码使用Router 的render属性渲染这两个组件，因为它们需要接收额外的 username 属性。另外，无论访问是帖子列表页面还是帖子详情页面，都会共用相同 Header 组件。

七、代码分片

默认情况下，当在项目根路径下执行 npm run build 时 ,create-react-app内部使用 webpack将 src路径下的所有代码打包成一个 JS 文件和一个 Css 文件。

当项目代码量不多时，把所有代码打包到一个文件的做法并不会有什么影响。但是，对于一个大型应用，如果还把所有的代码都打包到一个文件中，显然就不合适了。

create-react-app 支持通过动态 import() 的方式实现代码分片。import()接收一个模块的路径作为参数，然后返回一个 Promise 对象， Promise 对象的值就是待导入的模块对象。例如

// moduleA.js

const moduleA = 'Hello'
export { moduleA };

// App.js

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    // 使用import 动态导入 moduleA.js
    import('./moduleA')
      .then(({moduleA}) => {
        // 使用moduleA
      })
      .catch(err=> {
        //处理错误
      })
  };
  render() {
    return(
      <p>
        <button onClick={this.handleClick}>加载 moduleA</button>
      </p>
    )
  }
}

export default App;

上面代码会将 moduleA.js 和它所有依赖的其他模块单独打包到一个chunk文件中，只有当用户点击加载按钮，才开始加载这个 chunk 文件。
当项目中使用 React Router 是，一般会根据路由信息将项目代码分片，每个路由依赖的代码单独打包成一个chunk文件。我们创建一个函数统一处理这个逻辑：

import React, { Component } from 'react';
// importComponent 是使用 import()的函数
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component:  null //动态加载的组件
      }
    }
    componentDidMount() {
      importComponent().then((mod) => {
        this.setState({
          // 同时兼容 ES6 和 CommonJS 的模块
          component: mod.default ? mod.default : mod;
        });
      })
    }
    render() {
      // 渲染动态加载组件
      const C = this.state.component;
      return C ? <C {...this.props}></C> : null
    }
  }

  return AsyncComponent;
}

asyncComponent接收一个函数参数 importComponent, importComponent 内通过import()语法动态导入模块。在AsyncComponent被挂载后，importComponent就会阴调用，进而触发动态导入模块的动作。
下面利用 asyncComponent 对上面的例子进行改造，代码如下:

import React, { Component } from 'react';
import { ReactDOM, BrowserRouter as Router, Switch, Route } from 'react-dom';
import asyncComponent from './asyncComponent'
//通过asyncComponent 导入组件，创建代码分片点
const AsyncHome = asyncComponent(() => import("./components/Home"))
const AsyncLogin = asyncComponent(() => import("./components/Login"))

class App extends component {
  render() {
    return(
      <Router>
        <Switch>
          <Route exact path="/" component={AsyncHome}></Route>
          <Route exact path="/login" component={AsyncLogin}></Route>
          <Route exact path="/posts" component={AsyncHome}></Route>
        </Switch>
      </Router>
    )
  }
}

export default App;

这样，只有当路由匹配时，对应的组件才会被导入，实现按需加载的效果。

这里还有一个需要注意的地方，打包后没有单独的CSS文件了。这是因为 CSS样子被打包到各个 chunk 文件中，当 chunk文件被加载执行时，会有动态把 CSS 样式插入页面中。如果希望把 chunk 中的 css打包到一个单独的文件中，就需要修改 webpack 使用的 ExtractTextPlugin 插件的配置，但 create-react-app 并没有直接把 webpack 的配置文件暴露给用户，为了修改相应配置
，需要将 create-react-app 管理的配置文件“弹射”出来，在项目根路径下执行：

npm run eject

项目中会多出两个文件夹：config和 scripts,scrips中包含项目启动、编译和测试的脚本，config 中包含项目使用的配置文件，
webpack配置文件就在这个路径下，打包 webpack.config.prod.js 找到配置 ExtractTextPlugin 的地方，添加 allChunks:true 这项配置：

new ExtractTextPlugin({
  filename: cssFilename,
  allChunks: true
})

然后重新编译项目，各个chunk 文件使用的 CSS 样式又会统一打包到 main.css 中。

以上就是React Router知识的全面解析（代码示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的ReactRouter知识的全面解析（代码示例）全部内容，希望文章能够帮你解决ReactRouter知识的全面解析（代码示例）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284596.html

来源：【匿名】

【上一篇】传统组件间通信与React组件间通信的分析对比（代码示例）【下一篇】Reactv16.3.0:NewlifecyclesandcontextAPI

更多 ►

【ReactRouter知识的全面解析（代码示例）】教程文章相关的互联网学习教程文章

react-router 组件式配置与对象式配置小区别【图】

1. react-router 对象式配置和组件式配置组件式配置（Redirect） ----对应---- 对象式配置（onEnter钩子）IndexRedirect -----对应-------indexRoute的onEnter钩子函数原文：http://www.cnblogs.com/miaowwwww/p/6181736.html

react router路由传参【代码】

今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。1.通配符传参Route定义方式：<Route path=‘/path/:name‘ component={Path}/>Link组件：<Link to="/path/通过通配符传参">通配符</Link>参数获取：this.props.match.params.name注意这个match,许多博客活文章都是忽略了它，导致取不到值。这里...

react+webpack+redux+router+ant 构架react开发环境（1）【代码】【图】

需要安装的软件　　node.js　　npm推荐使用使用node@6.3.0以上的版本，因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm，因为伟大的墙，所以介意大家更换镜像，安装完毕之后，打开终端（mac）window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号，就说明安装成功了，可以下面的步骤了。构建项目新建一个文件夹使用webstorm编辑该文件夹，之后打开控制台，输入 npm init 来生成一个 package.json 的文件夹（...

react-router-dom【代码】

1. BrowserRouter 与 HashRouter最显著的区别是，HashRouter的URL中含#，例如：http://example.com/#/your/page2. Link 与 NaviLink 在页面中都会以<a></a>的形式渲染出来。<NavLink to="/react" activeClassName="hurray">React </NavLink>NaviLink是一种特殊的Link, 当URL为to属性的值时，其style为activeClassName中指定的样式。3. webpack内置就支持code splitting, 但要使用babel（将JSX编译为JavaScript）时，需安装 @babel/...

React-router总结【代码】

版本v3和v4有一些差距：https://blog.csdn.net/qq_35484341/article/details/80500237以下的总结，都是基于V4的官方文档：https://reacttraining.com/react-router/web/guides/quick-start核心组件和用法<BrowserRouter/> <HashRouter/> <Route/> <Switch/> <Redirect/> <Link/> (<NavLink/>) withRouter不多解释，先上实例：<BrowserRouter><Link to="/">主页</Link><Link to="/recommend">推荐</Link><Link to="/detail/1">详...

react-router解决锚点跳转问题【代码】

添加一个onClick方法。onClick方法传入一个锚点的id，然后用下面的函数来找到锚点并跳转到锚点。scrollToAnchor = (anchorName) => {if (anchorName) {// 找到锚点let anchorElement = document.getElementById(anchorName);// 如果对应id的锚点存在，就跳转到锚点if(anchorElement) { anchorElement.scrollIntoView(); }}}原文：http://www.cnblogs.com/yangyang03/p/7291759.html

React+router和react+redux使用过程的记录

1、集成react+redux的场景。在不同的路由页面下，控制公共的头部显示和隐藏等功能。因为路由和Header之间不是直接的父组件和子组件的关系，所以通过pros传参满足不了。这个时候引入redux共享state（redux的state和component里的state毫无关系http://www.jianshu.com/p/8287a1dd8ae9）redux包含三个主要文件action.js主要通过常量定义操作方法；reduer.js主要描述action对应的方法具体操作。Store将state和reduer关联起来。2、操作流...

react-router-dom实践与进阶

在使用react-router-dom的过程中，我们会不会有这样的疑问，他与react-router到底有什么关系？在react-router-dom中又多出了什么功能？深入了解这些功能才能更好的帮助我们将其应用在我们的项目之中。 ppt：react-router-dom实践与进阶或有欠缺之处，可留言完善。原文：https://www.cnblogs.com/MarphyDemon/p/11735706.html

【React Router】React Router API锦囊以及源码（持续更新）【代码】

目录Router 的类型Router HooksuseParamsuseRouteMatchuseLoactionuseSearchParamsuseHistorywithRouterRouter 的类型BrowserRouter, HashRouter : https://reactrouter.com/web/example/basicRouter HooksuseParams作用：获取路由中的参数, 比如获取id等等地址：https://reactrouter.com/web/api/Hooks/useparamsuseRouteMatch作用：从父路由中继续渲染子路由地址：https://reactrouter.com/web/api/Hooks/useroutematchuseL...

ReactRouter基础使用（图文教程）【图】

本文主要介绍了React Router的基础知识，感兴趣的朋友一起来看看吧。React是个技术栈，单单使用React很难构建复杂的Web应用程序，很多情况下我们需要引入其他相关的技术React Router是React的路由库，保持相关页面部件与URL间的同步下面就来简单介绍其基础使用，更全面的可参考指南1. 它看起来像是这样在页面文件中在外部脚本文件中 2. 库的引入React Router库的引入，有两种方式2.1 浏览器直接引入可以引用这里的浏览器版本，...

javascript – 使用React,react-router,jest和enzyme测试状态更改【代码】

我正在尝试通过测试来验证有状态组件的状态在componentDidMount中是否已适当更改,但由于react-router而遇到了问题. 我正在使用Enzyme,所以我使用mount来评估生命周期方法,例如componentDidMount.通常情况下,这很好……it("changes state after mount", () => {const newValue = "new value";const testPropertyRetriever = () => newValue;const wrapper = mount(<StatefulPagemyProperty="initial value"propertyRetriever={testP...

javascript – React react-router-dom将props传递给组件【代码】

我需要使用路由器将props传递给组件.这是我的代码：import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import AppBarTop from './appbar/AppBarTop';import Login from '../pages/login/Login'; import {BrowserRouter as Router, Route} from 'react-router-dom';class App extends Component {render() {const { isAuthenticated } = this.props;return (<Router><div><AppBarTop i...

总结一篇react-routerJS控制路由跳转的实例教程

这篇文章主要介绍了react-router JS 控制路由跳转实例，react实现路由可以直接使用react-router。有兴趣的可以了解一下Link组件用于正常的用户点击跳转，但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢？下面是一个表单。<form onSubmit={this.handleSubmit}><input type="text" placeholder="userName"/><input type="text" placeholder="repo"/><button type="submit">Go</button> </form>第一种...

从路由开始深入理解react-router4.0源码

本篇文章给大家带来的内容是关于从路由开始深入理解react-router 4.0源码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接...