react-router-dom 路由组件介绍

2021-02-19 0 By admin

使用 React框架开发单页面应用SPA,想实现页面间的跳转,首先想到的就是使用路由。在React 框架中,常用的有两个包可以实现这个需求,那就是 react-router-native 和 react-router-dom。react-router 官网

一、React-Router-Dom 安装

react-router 提供了多个包可以单独使用。

package description
react-router 路由核心功能
react-router-dom 基于react-router提供在浏览器运行环境下功能
react-router-native for React Native(原生)
react-router-config static route congif helpers

开发PC端程序时只需要安装 react-router-dom 包,reac-router-dom 依赖 react-router 会自动安装依赖。

npm install react-router-dom -S  #(生产阶段的依赖)
// 或者
yarn add react-router-dom  

二、React-Router-Dom 组件介绍

react-router 包含三种类型的组件:路由组件路由匹配组件导航组件。在使用这些组件的时候,都必须先从 react-router-dom 引入。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

三、路由组件

React-Router 提供了两种路由组件: BrowserRouter 和 HashRouter。

  1. BrowserRouter 是基于HTML5 history API (pushState, replaceState, popstate)事件
  2. HashRouter是基于window.location.hash

四、路由匹配组件

路由匹配组件有两个: Route 组件和Switch 组件。Switch把多个路由组合在一起。
Route 组件可以设置三种属性:component、render、children来渲染出对应的内容。

4.1、Route组件的参数

  1. path:路由的匹配路径
  2. components:匹配成功后渲染的组件(值为组件名称)
  3. render:路径匹配成功后渲染的组件的render方式 (值为一个函数,返回一个组件或标签)
  4. exact:完全匹配

当组件已存在时,一般使用 component属性 当需要传递参数变量给组件时,需要使用render属性。

五、导航组件

有三种常用的导航组件,分别是:Link组件、NavLink组件、Redirect组件。NavLink组件是一种特殊的Link组件,匹配路径时,渲染的a标签带有active。