React.js (3) - React-Router

React Router 導入專案使用情況筆記。

安裝

使用 Yarn: yarn add react-router-dom

使用 NPM: npm install react-router-dom

專案導入

import React, { Component } from 'react';
import './App.css';

import {BrowserRouter as Router, Route,Link} from 'react-router-dom'

const home = ()=>{
  return (<div><h2>Home</h2></div>)
}

const AboutPage = ()=>(
  <div>
    <h2>About</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <div>
            <Link to="/">Home</Link><br />
            <Link to="/about">About</Link>
          </div>

          <hr />
          <Route exact path="/" component={home}/>
          <Route exact path="/about" component={AboutPage}/>
        </div>
      </Router>
    );
  }
}

export default App;

由上例，最主要的 Component 需要用 <Router> 包覆，然後在切換連結的地方使用 <Link to="/xxx"> ，然後把要顯示內容的區塊，用 <Route component={你的function}>  來顯示。

其中 exact 的參數，是只有網址一致的情況，才會進入這個 <Route> ，實際上這個 <Route> 也代表符合網址路由條件後，要顯示的 Component。

Server Side Render

這裡的 server side render 指的是你還需要撰寫 node.js 的 app, 然後用 babel 去編譯它。

詳情請參考: https://reacttraining.com/react-router/

Reference:

https://reacttraining.com/react-router/