react-router

react-router

import {  hashHistory  ,Router, Route, IndexRoute,Link } from 'react-router'
<Router history={hashHistory}> //hash
     <Route path='/' component={App}>
       <IndexRoute component={Player} />
       <Route path='/list' component={Musiclist}></Route>
     </Route>
   </Router>

参数传递

<Route path='/list/:id' component={Musiclist}></Route>

引用： this.props.params.id

Link链接跳转:

<Link to='/list'>我的私人音乐坊 &qt;</Link>

react-router-dom

import {Route,BrowserRouter,Switch,HashRouter} from 'react-router-dom';
<HashRouter>
  <Switch>
    <Route exact path="/" component={MobileIndex}></Route>
    <Route path="/details/:uniquekey" component={MobileNewsDetails}></Route>
    <Route path="/usercenter" component={mobileUserCenter}></Route>
  </Switch>
</HashRouter>

react-router与react-router-dom
没什么大区别,后者更适合移动端,喜欢哪个都可以。

React Router for WEB，一般我们前端就用这个包来进行WEB开发了，提供包括上述react-router相关的组件和方法以外还有如下接口：
BrowserRouter HashRouter Link NavLink

BrowserRouter HashRouter

1. HashRouter 跳转相同路由(不同query/hash)的url,会报错。

页面刷新

Update(){
  Component.forceUpdate();
}
onClick={this.Update.bind(this)}

返回 上一级

back(){
  window.history.back();
}

锚点跳转

scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName.Item);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
}
onClick={()=>this.scrollToAnchor({id})}

页面跳转 滚动条问题

window.scrollTo(0,0)