React-router 路由基本使用（学习第四天）

一、React路由

1、React Router4.0基本概述：

React Router4.0（以下简称 RR4）遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（声明式编程简单来讲就是你只需要关心做什么，而无需关心如何去做，可组合性的特点。

2、RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是：

• react-router React Router 核心
• react-router-dom 用于 DOM 绑定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 静态路由配置的小助手

3、SPA

Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容

优点：

• 有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快
• 重前端，数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑

缺点：

• 首次进入处理慢
• 不利于 SEO

3、安装

载安装 react 路由

npm i -S react-router-dom

二、组件

1、BrowserRouter 组件

（1）BrowserRouter 组件是什么？

BrowerRouter：页面跳转原理是使用了pushState、replaceState,路径不包含#直接定位到/目录下

使用方式

index.js 引入

import {
    BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  < BrowserRouter>
    <App />
    </BrowserRouter>,
  document.getElementById('root')
);

2、HashRouter 组件

（1）HashRouter 组件是什么？

HashRouter：页面跳转原理是使用了location.hash、location.replace,并且路径中是包含/#

使用方式

import {
    HashRouter } from 'react-router-dom';

ReactDOM.render(
  < HashRouter>
    <App />
    </HashRouter>,
  document.getElementById('root')
);

3.BrowserRouter 组件 和 HashRouter 组件的区别

• （1）BrowerRouter的开启需要后端配置的，类似于Vue中的history模式。HashRouter类型于Vue中的hash模式
• （2）从页面的地址栏中可以看出HashRouter是包含#号的，而BrowerRouter是包含/号的

三、Route 组件配置路径

1、Route 组件

通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域

代码展示

import React from "react"
import {
   Route} from "react-router-dom";
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';

function App() {
   
  return (
    <div>
      <Route path="/" component={
   IndexPage}/>
      <Route path="/about" component={
   AboutPage}/>
      <Route path="/about/more" component={
   AboutMorePage}/>
    </div>
  );
}

export default App;

React 的配置路由跳转可以分为:

• 在上面引入 Route 和 组件地址
• 上面使用的是 函数式组件,你也可以使用类组件,在 return 里面 使用 Route 单标签,里面写入匹配的路径 和 组件地址

2、exact

exact 属性表示路由使用 精确匹配模式，非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
path中 匹配url的方式不是相等,而是 以指定的 url 开头
为了解决这个问题, 你可以在配置路径时,在里面 加上一个单词 exact

代码展示

function App() {
   
  return (
    <div className="App">
        {
   /* <Route path="/" exact component={IndexPage} />
        <Route path="/about" exact component={AboutPage} />
        <Route path="/about/more" exact component={AboutMorePage} /> */}
        <nav />
    </div>
  );
}

3、Link 组件

Link 组件用来处理 a 链接 类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置

import React from 'react'