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

 

安裝react

 1 npm install react-router-dom --save-dev //這裏可使用cnpm代替npm命令 npm

基本操做瀏覽器

咱們新建兩個頁面,分別命名爲‘home’和‘mine’。這頁面中編寫以下代碼:react-router

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

而後再新建一個路由組件,命名爲‘Router.js’,並編寫以下代碼:dom

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


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


export default BasicRoute;

如上代碼定義了一個純路由組件,將兩個頁面組件Home和Mine使用Router組件包裹,外面套用Swicth作路由匹配,當路由組件檢測到地址欄與Router的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/#/」:this

 

 

 輸入「http://localhost:3000/#/detail」:url

 

 經過a標籤跳轉spa

能夠看到其實路由已經開始工做了,接下來咱們再來作頁面間的跳轉,在home.js和mine.js中,咱們修改以下代碼:code

//home.js
import React from 'react';

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


export default class Mine 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這個函數跳轉都mine頁面,在路由組件中加入的代碼就是將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();
相關文章
相關標籤/搜索