React路由介绍【七日打卡】

NoBugNo
1,038 阅读6分钟

在React SPA项目开发过程中，路由跳转必不可少。本篇博文主要介绍下React中路由相关知识。

在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

安装

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

基本操作

然后我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码： home.js

import React from 'react';
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>去detail</a>
            </div>
        )
    }
}

detail.js

import React from 'react';
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>回到home</a>
            </div>
        )
    }
}

然后再新建一个路由组件，命名为“router.js”，并编写如下代码：

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';

const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/detail" component={Detail}/>
        </Switch>
    </HashRouter>
);

export default BasicRoute;

如上代码定义了一个纯路由组件，将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载相应的页面。

然后在入口文件中——我这里指定的是index.js——编写如下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

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

这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”：

home.js 输入“http://localhost:3000/#/detail”：

detail.js

通过a标签跳转

可以看到其实路由已经开始工作了，接下来我们再来做页面间的跳转。在home.js和detail.js中，我们修改如下代码：

import React from 'react';
export default class Home extends React.Component {
    render() {
        return (
            <div>
            <a href='#/detail'>去detail</a>
        </div>
    )
}
}

home.js

import React from 'react';

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a href='#/'>回到home</a>
            </div>
        )
    }
}

重新打包运行，在浏览器地址栏输入“http://localhost:3000/”，试试看页面能否正常跳转。如果不能，请按步骤一步一步检查代码是否有误。以上是使用a标签的href进行页面间跳转，此外react-router-dom还提供了通过函数的方式跳转页面。

通过函数跳转

首先我们需要修改router.js中的两处代码：

...
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';
...
<HashRouter history={hashHistory}>
...

然后在home.js中：

import React from 'react';

export default class Home extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div>
                <a href='#/detail'>去detail</a>
                <button onClick={() => this.props.history.push('detail')}>通过函数跳转</button>
            </div>
        )
    }
}

在a标签下面添加一个按钮并加上onClick事件，通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去，然后就可以在子组件中通过props调用history的push方法跳转页面。

很多场景下，我们还需要在页面跳转的同时传递参数，在react-router-dom中，同样提供了两种方式进行传参。

url传参 在router.js中，修改如下代码：

...
<Route exact path="/detail/:id" component={Detail}/>
...

然后修改detail.js，使用this.props.match.params获取url传过来的参数：

...
componentDidMount() {
    console.log(this.props.match.params);
}
...

在地址栏输入“http://localhost:3000/#/detail/3”，打开控制台：

可以看到传过去的id=3已经被获取到了。react-router-dom就是通过“/:”去匹配url传递的参数。

隐式传参 此外还可以通过push函数隐式传参。

修改home.js代码如下：

import React from 'react';

export default class Home extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div>
                <a href='#/detail/3'>去detail</a>
                    <button onClick={() => this.props.history.push({
                        pathname: '/detail',
                        state: {
                            id: 3
                        }
                })}>通过函数跳转</button>
            </div>
        )
    }
}

在detail.js中，就可以使用this.props.history.location.state获取home传过来的参数：

componentDidMount() {
    //console.log(this.props.match.params);
    console.log(this.props.history.location.state);
}

跳转后打开控制台可以看到参数被打印：

其他函数 replace 有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：

this.props.history.replace('/detail');

goBack 场景中需要返回上级页面的时候使用：

this.props.history.goBack();

嵌套路由

嵌套路由的适用场景还是比较多的，接下来就来介绍一下实现方法。

首先在Vue中实现嵌套路由，只需要将配置文件写成children嵌套，然后在需要展示子路由的位置加上即可。React中应该如何实现呢？其实原理和Vue类似，只需要在父级路由中包含子路由即可。这样说可能很多同学会一头雾水，直接上代码（不使用上面的例子）： 首先定义父级组件MainLayout

import React from 'react';
import './MainLayout.scss';
const { Header, Sider, Content } = Layout;
export default class MainLayout extends React.Component {
    render() {
        return (
            <div className='main-layout'>
                父组件
            </div>
        );
    }
}

然后定义子组件Home：

import React, {useState} from 'react';
import {Modal, Select} from "antd";
import {connect} from 'react-redux';
import {addCount} from '../../servers/home';
function Home(props) {
    const [visible, setVisible] = useState(false);
    const {countNum: {count}, dispatch} = props;
    return (
        <div>
            子组件
        </div>
    )
}

export default Home;

然后将它们添加进路由router.js，并且关联父子关系：

import React from 'react';
import {HashRouter, Route, Switch} from "react-router-dom";
import Home from '../pages/Home/Home';
import MainLayout from '../layout/MainLayout';

const BasicRouter = () => (
    <HashRouter>
        <Switch>
            <Route path="/index" component={
                <MainLayout>
                  <Route exact path="/" component={Home}/>
                  <Route exact path="/index" component={Home}/>
                  <Route path="/index/home" component={Home}/>
                </MainLayout>
             }/>
        </Switch>
    </HashRouter>
);


export default BasicRouter;

在MainLayout中，修改如下代码：

import React from 'react';
import './MainLayout.scss';
const { Header, Sider, Content } = Layout;
export default class MainLayout extends React.Component {
    render() {
        return (
            <div className='main-layout'>
                {this.props.children}
            </div>
        );
    }
}

如此，一个嵌套路由就完成了。

总结 这篇文章基本上涵盖了大部分react-router-dom的用法，此后再发现有什么遗漏我会再继续补充。

拓展阅读

初次创建React项目，一般选择使用脚手架工具cerate-react-app完成，使用该脚手架工具生成React项目一般存在以下问题：

  1. 生成项目后，脚手架为了“优雅”，隐藏了所有的webpack相关的配置文件，此时查看生成的文件夹目录，会发现找不到任何webpack配置文件；如果我们需要在webpack中安装一些自己的loder或者plugin变的很困难；
  2. create-react-app自动生成的webpack中集成了：eslint（代码检测）、url-loader（图片BASE64 [小于10000kb的图片]）、babel-loader（ES6和JSX语法解析）、style-loader、css-loader（CSS代码解析）、HtmlWebpackPlugin（产出HTML插件）等内容；
  3. 仅仅是安装了react中最常用的 react / react-dom 组件，其余的并没有安装，所以在项目开发中，我们根据需要，可能还会安装：redux react-redux react-router-dom prop-types 等等。

应用脚手架工具生成的项目文件结构如下所示:

├── README.md 项目介绍

├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

├── package-lock 上线锁定版本信息

├── gitignore 这个是git的选择性上传的配置文件

├── src 源码目录 这个目录里边放的是我们开放的源代码

│ ├── App.css

│ ├── App.js 这个文件相当于一个方法模块，也是一个简单的模块化编程

│ ├── App.test.js

│ ├── index.css

│ ├── index.js 这个就是项目的入口文件

│ ├── serviceWorker.js 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

├── public 公共文件，里边有公用模板和图标等一些东西

├── favicon.ico : 这个是网站或者项目的图标，一般在浏览器标签页的左上角显示

├── index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。

├── mainifest.json：移动端配置文件。

avatar
文章
阅读
粉丝