隨著專案越來越龐大，如果我們想用單頁應用程式(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更多的屬性！