React-router4 簡單總結

官方文檔讀到這里，大概明白了React-router是專門為單頁面設計的，，我只能說多頁面格外的不方便

首先這個是基本的套路

import React from 'react'
import React from 'react-dom'

import {
  BrowserRouter as Router,
  Route,   // 這是基本的路由塊
  Link,    // 這是a標簽
  Switch   // 這是監聽空路由的
  Redirect // 這是重定向
  Prompt   // 防止轉換
  
} from 'react-router-dom'


// 模板，套路
const CustomLinkExample = () => (
 <Router>
    <div>
      <ul>
        <li><Link to="/">Form</Link></li>
        <li><Link to="/one">One</Link></li>
        <li><Link to="/two">Two</Link></li>
      </ul>
      <Route path="/" exact component={Form}/>
      <Route path="/one" render={() => <h3>One</h3>}/>  // 路由跳轉
      <Route path="/two" render={() => <h3>Two</h3>}/>
      <PrivateRoute path="/protected" component={Protected}/> // 重定向

      <Switch>  // 監聽空路由，
        <Route path="/" exact component={Home}/>
        <Redirect from="/old-match" to="/will-match"/>
        <Route path="/will-match" component={WillMatch}/>
        <Route component={NoMatch}/>  // 空路由，
      </Switch>


      <Prompt  // 防止轉換 通常是在表單輸入時使用
          when={isBlocking}  // 是否開啟防止轉換
          message={location => (  // 這是說明
            `Are you sure you want to go to ${location.pathname}`
          )}
        />
ReactDOM.render(
	<CustomLinkExample />,
	document.getElementById("app")
)