iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 22

【DAY 22】react-router,實現單頁式網站的秘密

【前言】
  終於來到最後的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,這些我們明天再來一一解釋吧!


上一篇
【DAY 21】暫且休息一天,聊聊目前學習的心境。
下一篇
【DAY 23】react-router三劍客,Router、Route、Link(上)
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言