簡介

 

 <Switch>是唯一的因為它僅僅只會渲染一個路徑。相比之下（不使用<Switch>包裹的情況下），每一個被location匹配到的<Route>將都會被渲染。

安裝

首先進入項目目錄，使用npm安裝react-router-dom：

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

基本操作

然后我們新建兩個頁面，分別命名為“home”和“detail”。在頁面中編寫如下代碼：

import React from 'react';


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

 

home.js

import React from 'react'; 

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>回到home</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')
);

 

這里相當於向頁面返回了一個路由組件。我們先運行項目看一下效果，在地址欄輸入“ http://localhost:3000/#/”：

 

 輸入“ http://localhost:3000/#/detail”：

 

如果不使用 switch 

兩個組件都打印