随着专案越来越庞大，如果我们想用单页应用程序(SPA)架设网站，需透过route（路由）来渲染不同的页面。我们可以利用React Router来管理SPA页面的route。

首先，在React专案中安装react-router-dom，在专案终端机输入

yarn add react-router-dom
或是
npm install --save react-router-dom

基本route设置

在要显示的元件设置路由，藉由切换路由渲染不同的元件，更新页面。
一开始先用到react-router-dom套件中的 BrowserRouter（HashRouter）, Switch, Route这三个功能。

BrowserRouter（HashRouter）

以标签形式包覆SPA最上层的元件，让元件（包含里面的子元件）拥有路由的功能。

以下操作专案中的 index.js中使用，首先在最上方引入：

import { BrowserRouter } from 'react-router-dom'; 
//也可以将BrowserRouter 换成 HashRouter 使用

在ReactDOM.render中把App元件包起来，就能在下层的所有子元件中设定route了

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById('root')
);

那麽，和 有什麽差别？

• BrowserRouter的路径格式：mypage.com/home
  建立在 HTML history API之上，显示的url简洁。
  *网站上线後，需要有後端配合，接受浏览器向这个ur发出的请求，不然会造成连线错误。

• HashRouter的路径格式：mypage.com/#/home
  使用 hash url ，也是就 # 来控制url，浏览器不会对的url作出请求。

我只在本机上测试，看#不顺眼，就用BrowserRouter做示范吧。

Switch和Router在App元件中使用，将它们引入App.js！

import {  Route ,Switch } from 'react-router-dom';

Switch

放在JSX模板的节点内，Switch标签里面可以包多个标签(只能包Route)，
并控制如果路径和两个Route的path都匹配，Switch只会渲染第一个匹配的的Route。

<Switch>
     <Route  path='/:id' component={Home} /> 
	   <Route  path='/1' component={One} />
	   <Route  path='/2' component={Two} />  
</Switch>

// 假如路径为localhost:3001/1 或 localhost:3001/2
// 都和path='/:id'匹配
// 画面只会渲染Home元件

path为'/1'，还是渲染Home元件，没有渲染One元件

Route

设置路径所要显示的元件

Route的基本属性设定

path：网址後面的後面的路径
component：此route要显示的元件

<Route  path='/' component={Home} /> 

来个完整范例来练习设置最基本的路由吧！

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

import {  Route , Switch } from 'react-router-dom';
import './App.css';
import One from '../contanier/One/One';
import Two from '../contanier/Two/Two';

function Home(){
  return(
  <h1>
    HOME
  </h1>)
}

function App() {
  return (
    <div className="App wrap">
      
	      <Switch>
              <Route  path='/home' component={Home} />
              <Route  path='/1' component={One} />
              <Route  path='/2' component={Two} />  
	      </Switch> 

    </div>
  );
}

export default App;

yarn start後可以试试分别网址列後方换上/home、/1、/2 有没有切换画面。

下一篇介绍更多的Route更多的属性！