**文檔及下載** react router 文檔： http://react-guide.github.io/react-router-cn/docs/API.html https://react-guide.github.io/react-router-cn/ react-router-dom：https://www.npmjs.com/package/react-router-dom react-router: https://www.npmjs.com/package/react-router react-router-dom示例及文檔：https://reacttraining.com/react-router/web/guides/philosophy ## 一、Link參數跳轉 ~~~ <Link to={ { pathname:"/jump", hash:'#ahash', query:{foo: 'foo', boo:'boo'}, state:{data:'hello'} } } >點擊跳轉 </Link> ~~~ ## 二、hash跳轉 ~~~ hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }, }); ~~~ ## 三、嵌套路由 在App中要渲染他的子組件，用{this.props.children}實現，換句通俗的話講，就是在App中留個位置，用于顯示子組件。不管子組件是否渲染都會渲染父組件。 index.js ~~~ // index.js // ... render(( <Router history={hashHistory}> <Route path="/" component={App}> <Route path="/boys" component={Boys}/> <Route path="/girls" component={Girls}/> </Route> </Router> ), document.getElementById('app')) ~~~ App.js ~~~ // App.js // ... render() { return ( <div> <h1>Ghettohub Issues</h1> <ul role="nav"> <li><Link to="/boys">男神</Link></li> <li><Link to="/girls">女神</Link></li> </ul> {this.props.children} </div> ) } // ... ~~~ 默認路由： ~~~ <IndexRoute component={Home}/> ~~~ 默認鏈接： ~~~ <IndexLink to="/" activeClassName="active">Home</IndexLink> ~~~ ## 四、簡單示例  index.js ~~~ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, hashHistory } from 'react-router'; import App from './App'; import Login from './pages/Login'; import Home from './pages/Home'; ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={App}/> <Route path="/login" component={Login}/> <Route path="/home" component={Home}/> </Router>, document.getElementById('root') ); ~~~ App.js ~~~ import React, { Component } from 'react'; import { Link } from 'react-router'; class App extends Component { constructor(props) { super(props); } render() { return ( <div className="App"> <ul> <li><Link to="/login">登錄</Link></li> </ul> </div> ); } } export default App; ~~~ pages/Login.js ~~~ import React, { Component } from 'react'; import { hashHistory } from 'react-router'; import "../css/common.css"; class Login extends Component { constructor(props) { super(props); this.state = { username: '', password: '' }; } componentDidMount() { console.log('%c DOM掛載完成.', 'color: green'); } componentWillUpdate() { console.log('%c 組件將更新.', 'color: #666'); } handleLogin() { this.setState({ username: this.refs.username.value, password: this.refs.password.value }, function() { hashHistory.push({ pathname: '/home', query: {username: this.state.username} }); }); } render() { return ( <div> <fieldset style={{width: 300}}> <legend>登錄</legend> <div className="zh-mt-10"><input type="text" ref="username" placeholder="用戶名" /></div> <div className="zh-mt-10"><input type="password" ref="password" placeholder="密碼" /></div> <button className="zh-mt-10" type="button" onClick={this.handleLogin.bind(this)}>登錄</button> </fieldset> </div> ); } } export default Login; ~~~ pages/Home.js ~~~ import React, { Component } from 'react'; import { hashHistory } from 'react-router'; class Home extends Component { constructor(props) { super(props); } render() { console.log(this.props); return ( <div> 歡迎 {this.props.location.query.username} ~ <button type="button" onClick={()=>hashHistory.goBack()}>返回</button> </div> ); } } export default Home; ~~~ ## 五、react-router-dom 配合 react-redux使用 index.js ~~~ // ... render( <Provider store={store}> <App/> </Provider>, document.getElementById('root') ) // ... ~~~ App.js ~~~ import React,{Component} from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from '../containers/Home'; import User from '../containers/User'; import Search from '../containers/Search'; import Detail from '../containers/Detail'; import City from '../containers/City'; import NotFound from '../containers/404Page'; class App extends Component{ constructor(props, context){ super(props, context); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate; } render(){ return ( <Router> <div> {/** * 這里可以公共的樣式,比如 頭部, 尾部, 等. */} header {/*結合Switch組件可以匹配到都匹配不到的路勁,404等...*/} <Switch> <Route path='/' exact component={Home}/> <Route path='/user' component={User}/> <Route path='/search' component={Search}/> <Route path='/detail' component={Detail}/> <Route path='/city' component={City}/> <Route component={NotFound}/> </Switch> footer </div> </Router> ); } } export default App; ~~~ ## 五、路由動態跳轉及參數獲取 1、BrowserRouter ``` this.props.history.push('/detail', {params: { user: 'zhangsan' }}); ``` 2、HashRouter ``` this.props.history.push({ pathname: '/detail', state: {params: { user: 'zhangsan' }}}); ``` 3、參數獲取 ``` this.props.location.state.params ``` 參考鏈接： http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu http://blog.csdn.net/qq_23158083/article/details/68488831 http://cw.hubwiz.com/card/c/5708a1995fd193d76fcc7147/1/2/1/ https://www.jianshu.com/p/81c720481102 （react-router-dom react-redux） react-router 4 簡易入門 https://segmentfault.com/a/1190000010174260