react-router-dom路由简单学习

通过函数跳转

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

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


export default BasicRoute;

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方法跳转页面。

url传参

在router.js中，修改如下：

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

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

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

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();
  

嵌套路由

1. 定义父级组件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>
           );
       }
   }
   

2. 定义子组件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;
   

3. 添加进路由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>
        );
    }
}