【前言】
　　終於來到最後的react-router囉！再撐一下就可以把這三劍客都認識一遍了！
【正文】
　　我想大家應該都很常聽到什麼SPA、單頁式網站、Single Page Application這幾個詞彙，這些東西都是紙一樣的東西，那什麼是SPA呢？簡單來說，就是將網頁以動態寫入，而非以傳統重新整理的方式呈現一個新的網頁，這樣可以提升我們的使用者體驗。
　　其實react很適合拿來做SPA這種網站，因為react是利用一個個component把網頁組合起來的，只要我們告訴他什麼時候要render什麼就能呈現我們要的，那要實現這樣的效果，就得藉由react-router的幫忙。

React Router is a collection of navigational components that compose declaratively with your application.

　　React-router其實就是幫我們的網頁做導引的集合，告訴著我們什麼樣的url應該要呈現什麼畫面給使用者看。那要如何使用react-router呢？首先我們要安裝react-router：

npm install --save react-router-dom

　　然後我們今天先來看一個簡單的範例：（主要內容以加備註）

• App.js

import React from 'react';
// BrowserRouter：一般的路由，也是目前比較常用的，需要伺服器支援url rewrite
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Footer from './Footer';

class App extends React.Component {
	render() {
		return(
			// Router：在最外層的路由組件
			<Router>
				{/* Router底下只能有一個child */}
				<div>
					{/* Route：路由的配對組件 */}
					{/* path是要與此路由配對的路徑、exact是指是否要路徑完成匹配、component是指render的組件 */}
					<Route path="/" exact component={Home} />
					<Route path="/About" component={About} />
					<Route path="/Contact" component={Contact} />
					<Footer />
				</div>
			</Router>
		);
	}
}

export default App;

• Home.js

import React from 'react';

const Home = () => (
　<div>Home</div>
);

export default Home;

• About.js

import React from 'react';

const About = () => (
  <div>About</div>
);

export default About;

• Contact.js

import React from 'react';

const Contact = () => (
　<div>Contact</div>
);

export default Contact;

• Footer.js

import React from 'react';
import { Link } from "react-router-dom";

const Footer = () => (
  <div>
		{/* Link是一個連結用component，會被render成<a>，to是指連結目標 */}
		<Link to="/">Home</Link>
		{' '}
		<Link to="/About">About</Link>
		{' '}
		<Link to="/Contact">Contact</Link>
	</div>
);

export default Footer;

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './React-router/App';

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

　　可以看到，其實react-router最主要的組成要素必須包含Router、Route、Link，這些我們明天再來一一解釋吧！