安裝
cnpm install react-router-dom

import React from 'react'
import Home from './pages/Home'
import Detail from './pages/Detail'
// import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'
import {HashRouter as Router, NavLink, Redirect, Route, Switch, withRouter} from 'react-router-dom'
/*
 
*
 * BrowserRouter: H5特性， history.push
 * HashRouter: 錨點特性，連結裡帶#號，上線之後需要後臺做重定向處理，否則會有404問題
 */
<BrowserRouter
  basename={string}
  forceRefresh={bool}
  getUserConfirmation={func}
  keyLength={number}
></BrowserRouter>
1. basename: string  所有位置的基準 URL。如果你的應用程式部署在伺服器的子目錄，則需要將其設定為子目錄。basename 的正確格式是前面有一個前導斜槓，但不能有尾部斜槓。
 
<BrowserRouter basename="/calendar">
  <Link to="/today" />
</BrowserRouter>

2. forceRefresh: bool
如果為 true ，在導航的過程中整個頁面將會重新整理。一般情況下，只有在不支援 HTML5 history API 的瀏覽器中使用此功能。
const supportsHistory = 'pushState' in window.history;

<BrowserRouter forceRefresh={!supportsHistory} />

<HashRouter></HashRouter>
1.hashType: string
slash 
 
- 後面跟一個斜槓，例如 #/ 和 #/sunshine/lollipops
noslash - 後面沒有斜槓，例如 # 和 #sunshine/lollipops
hashbang - Google 風格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops

function App () {
  return (
    <div className="app">
      <Router>
        <Switch>{/*使用switch後，每次只加載一個元件*/}
          <Route path="/home" component={Home} />
          <Route exact path="/detail" component={Detail} />
          <Route strict exact path="/detail/:id?" component={Detail} />
          {/*可通過render形式給定元件，並且可以傳參到demo元件，使用props獲取*/ }
          <Route path="/demo" render={(props) => <Demo {...props} title="demo" />} />
          {/**跳轉 */}
          <NavLink to='/detail'></NavLink>
          {/* 下面這種形式的跳轉，state內屬於隱形傳參，不會再url上顯示出來 */}
          <NavLink
            exact
            to={{
              pathname: '/detail',
              search: '?id=1',
              hash: '@hash',
              state: {title: 1111}
            }}
          ></NavLink>
          {/* url重定向,url訪問/oldPage，直接跳到/page去 */}
          <Route from="/oldPage" to="/page" />
          {/* 進入到頁面，判斷是否登入，沒登入直接跳轉到登入頁面 */}
          <Route path="/shop" render={() => {
            return isLogin ? <Shop /> : <Login />
          }} />
          {/* 或者在Shop頁面渲染元件內容的時候做下判斷 */}
          render () {
            return (
              <div>
                isLogin ? <div>shop內容</div> : <Redirect to="/login">
              </div>
            )
          }
          {/* 404 頁面配置 */}
          <Route component={page404} />
          {/* 路由巢狀.在book元件內使用this.props.children載入對應的路由巢狀 */}
          <Book>
            <Switch>
              <Route path="/book/webbook" component={Webbook} />
              <Route path="/book/jababook" component={JavaBook} />
            </Switch>
          </Book>
        </Switch>
      </Router>
    </div>
  )
}
export default App



關於url傳參部分，傳參方式分兩種
1，'/detail/1/2'
這種情況需要現在路由配置種做下配置<Route strict exact path="/detail/:id?/val" component={Detail} />，
然後在跳轉之後的頁面中從props.params中讀取id和val

2，'/detail?id=1'
在跳轉後的頁面種使用以下兩種方式獲取
  1> 
  const params = new URLSearchParams(props.location.search)
  console.log(params.get('id'))
  2> 使用qs庫
  const value = qs.parse(props.location.search)
  console.log(value.id)


  函式式跳轉push/replace(區別：push屬於疊加的，上個頁面還會存在，replace是覆蓋，上一個頁面已經不存在)
  props.history.push('/shop')

  高階函式 withRouter 
  作用是將一個元件包裹進Route裡面, 然後react-router的三個物件history, location, match就會被放進這個元件的props屬性中.
  把不是通過路由切換過來的元件中，將react-router 的 history、location、match 三個物件傳入props物件上

1. 預設情況下必須是經過路由匹配渲染的元件才存在this.props，才擁有路由引數，才能使用程式設計式導航的寫法，執行this.props.history.push('/ ')跳轉到對應路由的頁面
然而不是所有元件都直接與路由相連（通過路由跳轉到此元件）的，當這些元件需要路由引數時，使用withRouter就可以給此元件傳入路由引數，此時就可以使用this.props
2. 高階元件中的withRouter, 作用是將一個元件包裹進Route裡面, 然後react-router的三個物件history, location, match就會被放進這個元件的props屬性中.此時這個元件就具備了路由的屬性
使用方式很簡單
import {withRouter} from 'react-router-dom'
class Shop from Reach.Component {
  constructor (props) {
    super(props)
    props.history.listen(e => {
      console.log(e)
      // 監測到了路由變化了,當路由變化的時候可以做些可能需要的邏輯
    })
  }
}
export default withRouter(Shop)