React中路由参数如何改变页面不刷新数据的情况

// 获取路由参数
  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;
}