在React中使用react-router-dom路由

在React中使用react-router-dom路由

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

安装

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

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            >
                >去detail>
            >
        )
    }
}

home.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';


    export default class Home extends React.Component {
        render() {
            return (
                >
                href='#/detail'>去detail>
            >
        )
    }
}

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

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

import React from 'react';


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

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

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

goBack

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

import React from 'react';
import './MainLayout.scss';

const { Header, Sider, Content } = Layout;


export default class MainLayout extends React.Component {

    render() {
        return (
            
className='main-layout'>
                父组件
            >
        );
    }
}

然后定义子组件Home：

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 = () => (
    >
        >
            ="/index" component={
                >
                  ="/" component={Home}/>
                  ="/index" component={Home}/>
                  ="/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 (
            
className='main-layout'>
                {this.props.children}
            >
        );
    }
}

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

总结

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