// 獲取路由參數
  componentDidMount() {
    const didMountId = this.props.location.query.id;
    this.setState({ id: didMountId }, () => {
      this.props.pageList({ id: this.state.id }); // 請求接口獲取數據
    });
  }
//組件更新時被調用 
  componentWillReceiveProps(newProps) {
    if (newProps.location.query.id !== this.state.id) {
      this.setState({ id: newProps.location.query.id},  () => {
        this.props.pageList({ id: this.state.id});  //當路由參數改變時，重新請求接口獲取數據
      });
    }
  }

window.location.hash = 'qq' // 設置 url 的 hash，會在當前url后加上 '#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashchange', function(){
? ? // 監聽hash變化，點擊瀏覽器的前進后退會觸發
})

? ?window.history.pushState(state, title, url)
// state：需要保存的數據，這個數據在觸發popstate事件時，可以在event.state里獲取
// title：標題，基本沒用，一般傳 null
// url：設定新的歷史記錄的 url。新的 url 與當前 url 的 origin 必須是一樣的，否則會拋出錯誤。url可以是絕對路徑，也可以是相對路徑。

window.history.replaceState(state, title, url)
// 與 pushState 基本相同，但她是修改當前歷史記錄，而 pushState 是創建新的歷史記錄
window.addEventListener("popstate", function() {
? ? // 監聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發
});
window.history.back() // 后退
window.history.forward() // 前進
window.history.go(1) // 前進一步，-2為后退兩步，window.history.length可以查看當前歷史堆棧中頁面的數量

// hash模式
ReactDOM.render(
?? ? <HashRouter>
? ? ? ?? ?<Route path="/" component={Home}/>
</HashRouter>
)

// history模式
ReactDOM.render(
?? ? ? <BrowserRouter>
? ? ? ?? ? <Route path="/" component={Home} />
? ? ? </BrowserRouter>
)

<Link to="/a" ? />

? <Link to={{
? pathname: '/courses',
? search: '?sort=name',
? hash: '#the-hash',
? state: { fromDashboard: true }
}}/>

const oddEvent = (match, location) => {
? console.log(match,location)
? if (!match) {
? ? return false
? }
? console.log(match.id)
? return true
}
<NavLink isActive={oddEvent} to="/a/123">組件一</NavLink>

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>

// 基本的重定向
<Redirect to="/somewhere/else" />
// 對象形式
<Redirect
? to={{
? ? pathname: "/login",
? ? search: "?utm=your+face",
? ? state: { referrer: currentLocation }
? }}
/>
// 采用push生成新的記錄
<Redirect push to="/somewhere/else" />
// 配合Switch組件使用，form表示重定向之前的路徑，如果匹配則重定向，不匹配則不重定向
<Switch>
? <Redirect from='/old-path' to='/new-path'/>
? <Route path='/new-path' component={Place}/>
</Switch>

?<Switch>
? <Route exact path="/" component={Home}/>
? <Route path="/about" component={About}/>
? <Route path="/:user" component={User}/>
? <Route component={NoMatch}/>
</Switch>

? ?import React from ‘react';
? ? import { useHistory } from ‘react-router-dom';
?function backBtn(props) {
? ? ? ? let ?history = useHistory;
? ? ? ? return <button onClick={ ()=> {
? ? ? ? ? ? ? history.goBack();
}>返回上一頁</button>
? ? ? ?}

History {
? ? length: number;
? ? action: Action;
? ? location: Location;
? ? push(path: Path, state?: LocationState): void; // 調用push前進到一個地址,可以接受一個state對象，就是自定義的路由數據
? ? push(location: LocationDescriptorObject): void; // 接受一個location的描述對象
? ? replace(path: Path, state?: LocationState): void; // 用頁面替換當前的路徑，不可再goBack
? ? replace(location: LocationDescriptorObject): void; // 同上
? ? go(n: number): void; // 往前走多少也頁面
? ? goBack(): void; // 返回一個頁面
? ? goForward(): void; // 前進一個頁面
? ? block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
? ? listen(listener: LocationListener): UnregisterCallback;
? ? createHref(location: LocationDescriptorObject): Href;
}