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")
)