React-路由（一）

​🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-路由（一）

目录

1、介绍

2、路由的使用

2.1、相关组件

2.2、声明式导航

2.3、编程式导航

3、路由参数

1、介绍

React Router官网：Home v6.22.3 | React Router

使用用React Router前需要先进行安装：

npm i react-router-dom@5

React Router现在的主版本是5，思想：一切皆组件。

2、路由的使用

2.1、相关组件

如前面介绍里说的，自Router 4之后的思想是一切皆组件，所以在正式开始学习React路由前需要先对几个组件要有所掌握：

• Router组件（别名，真实是不存在的，为了简写路由模式的组件名称）：包裹整个应用（单个具体的组件/根组件），一个React应用只需要使用一次

  • 注意：在react中，不存在类似于vue的路由配置文件，对于前端路由模式的选择，我们可以通过该组件完成

  • Router类型： HashRouter和BrowserRouter

    • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）

    • BrowserRouter：使用H5的history API实现（localhost:3000/first）

  • 区别：

    • 两者在开发阶段，除了地址栏上的表现形式不一样以外，其它没区别

    • 两者在生产阶段，hash路由可以直接上生产，无需做任何配置，而history模式则上生产需要配置的，配置服务器环境，否则项目是不能刷新的，一刷新会404

• Link组件：用于指定导航链接（a标签）就是做声明式导航的（类似于vue中的router-link组件）

  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

• Route组件：指定路由展示组件相关信息（组件渲染）【路由规则】{path: xx,component:xxx}

  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致

  • component属性：展示的组件

  • 语法：<Route path="路径" component={组件}></Route>

  • 该组件除了具备定义路由规则功能外，还有类似于vue中router-view的功能

各个组件之间的关系

注意：Link和Route组件必须被Router组件给包裹，否则报错。

2.2、声明式导航

• 在src/index.js文件中定义一个路由模式（可选，也可以在具体的某个组件中使用Router）

import React from "react";
import ReactDOM from "react-dom";
​
// 设置路由模式
import {HashRouter as Router} from 'react-router-dom'
​
// 定义 provider
import { Provider } from "react-redux";
import store from "./Store/index";
​
import App from "./App";
​
ReactDOM.render(
    <Provider store={store}>
        {/* 使用Router包裹根组件 */}
        <Router>
            <App></App>
        </Router>
    </Provider>,
    document.getElementById("root")
);

• 在根组件src/App.js中引入路由相关组件（根据自身需要选择路由模式），并使用

  • 后续除了特殊的路由规则（嵌套路由）以外，其它普通的路由规则都需要在根组件中运用

import React, { Component } from "react";
import { HashRouter as Router, Route, Link } from "react-router-dom";
​
import Cmp10 from "./Components/Cmp10";
import Cmp11 from "./Components/Cmp11";
​
class App extends Component {
    render() {
        return (
            <Router>
                <div>
                    <h1>导航区域</h1>
                    <div>
                        <ul>
                            <li>
                                <Link to="/home">首页</Link>
                            </li>
                            <li>
                                <Link to="/news">新闻</Link>
                            </li>
                        </ul>
                    </div>
                </div>
                <Route path="/home" component={Cmp10}></Route>
                <Route path="/news" component={Cmp11}></Route>
            </Router>
        );
    }
}
​
export default App;

在写上述代码时注意，路由自带组件的顺序嵌套关系，组件<Link></Link>和组件<Route></Route>必须被组件<Router></Router>给包裹着。

需要注意：

刨除样式的影响，Route组件在HTML代码中的位置决定了渲染后其在页面中显示的位置。如果Route放在最后，则其显示的时候也在最后；若其放在渲染内容的最前面，相应的显示也会在最开始。

2.3、编程式导航

react-router-dom中通过history对象中的push/go等方法实现编程式导航功能，这一点与之前的vue路由还是很相似的。

形如：

this.props.history.push({
  pathname: "/home",
  search: "from=404",   // 表示传递查询字符串
  state: {              // 隐式传参，地址栏不体现
    username: "admin",
  },
});
​
// 给定给定的数字（正数或负数）决定去往历史栈中的哪个地址，正数往未来，负数往过去
this.props.history.go(-1)
this.props.history.goBack(-1)

请勿在根组件中写编程式导航，因为根组件默认是没有props对象，解决办法见后续。

3、路由参数

路由参数：在Route定义渲染组件时给定动态绑定的参数。

React路由传参方式有三种：

• ==动态路由参数（param）==

  • 以“/film/detail/:id”形式传递的数据

  • 在目标页面路由中传递

  • 在落地组件中通过this.props.match.params得到

  • 一般用于restful规范下的开发

• 查询字符串（query）

  • 通过地址栏中的 ?key=value&key=value传递

  • 在落地组件中通过this.props.location.search得到

  • 由于得到的数据是带“?”的，还需要进一步加工处理之后才能使用，因此建议少用或者不用

• 隐式传参（state），通过地址栏是观察不到的

  • 不合适写在声明式导航中，写在编程式导航中更加合适

  • 一般数用于埋点数据

    • 简单的讲，埋点是将部分标记隐藏起来，等待用户去触发，因为这个事情不想让用户看到（需要做一些数据的收集，后续做分析），因此会使用隐式传参的方式（大数据分析）

  • 在落地组件中通过this.props.location.state得到

接收示例：

constructor(props){
    super(props)
    this.state = {
        // 接收动态路由参数
        news_id: this.props.match.params.id,
        // 接收查询字符串并处理
        query: querystring.parse(this.props.location.search.slice(1)),
        // 接收state
        state: this.props.location.state
    };
}