react-router-dom路由

1,路由组件的基本实现

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

  安装:

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

npm install react-router-dom@5.3.0

  基本操作:

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

 

home.js

import React from 'react';


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

 detail.js

然后再新建一个路由组件,命名为“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')
);

 

2,路由跳转 

1) 通过 a 标签

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

 home.js

import React from 'react';


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

 

detail.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还提供了通过函数的方式跳转页面。 

 2) 通过函数跳转

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

import React from 'react'
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom'

<HashRouter history>
      <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/Detail" component={Detail}/>
            <Route path="/Find" component={Find}/>
            <Route path="/Save" component={Save}/>
        </Switch>
</HashRouter>

然后在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中,同样提供了两种方式进行传参。

3,路由传参

  1) URl 传参

     在router.js中,修改如下代码:

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

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

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

2) 隐式 传参

     此外还可以通过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.history.location.state);
}

4,其他函数

  1) replace

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

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

 

 2) goBack

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

this.props.history.goBack();

 

 

来源: https://www.cnblogs.com/xiaotaiyangye/p/11574306.html

posted @ 2023-11-23 22:39  凯宾斯基  阅读(228)  评论(0编辑  收藏  举报