我橫豎睡不著，字里行間看出2個字。。。。（缺錢，不缺錢誰半夜三更寫這玩意。這。。。。fork or star 吧）
react-router.gif
首先，在該項目開始之前，還請大家能夠先下載一個項目腳手架。本教程基于該腳手架進行開發
yo react-webpack _Image.png
先看文件大致架構
config_Image.png
渲染 Route （index.js 啟動的component）
//index.js
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/Main';
import About from './components/about'
import Product from './components/Product'
import About_detail from './components/About_detail'
import About_default from './components/About_default'
import { Router , Route , browserHistory , IndexRoute} from 'react-router';
let app = (<div>
<Router history={browserHistory}>
<Route path='/' component={App}></Route>
<Route path='/about' component={About}>
<IndexRoute component={About_default}></IndexRoute>
<Route path='/about/:eeee' component={About_detail} />
</Route>
<Route path='/product' component={Product}></Route>
</Router>
</div>)
// Render the main component into the dom
ReactDOM.render(app, document.getElementById('app'));
使用 Link 進行跳轉組件
require('normalize.css/normalize.css');
require('styles/App.css');
import React from 'react';
import { Link } from 'react-router';
class AppComponent extends React.Component {
render() {
return (
<div className="index">
<div><Link to="/" activeStyle={{color: 'red'}} >首頁 </Link></div>
<div><Link to="/about" activeStyle={{color: 'red'}}>關于我們</Link></div>
<div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒體</Link></div>
<div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產品服務</Link></div>
</div>
);
}
}
AppComponent.defaultProps = {
};
export default AppComponent;
從 Link 到 NavLink (可選，加次封裝而已)
import React , { Component } from 'react'
import { Link } from 'react-router'
class NavLink extends Component {
render () {
return <Link {...this.props} activeStyle={{color: 'red'}} />
}
}
export default NavLink
使用的時候
//onlyActiveOnIndex 只有是當前路由才顯示
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li>
onlyActiveOnIndex 只有是當前路由才顯示 一個路由的判斷。
URL 參數的傳遞 -- 傳遞query的方法
-
Link 的寫法，Link 代表A標簽
<div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產品服務</Link></div> -
獲取query的值
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li> <h4> {this.props.location.query.name} </h4>
URL 參數的傳遞 -- 傳遞params的方法
router 的寫法
<Route path='/about/:eeee' component={About_detail} />Link 的寫法，Link 代表A標簽
<div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒體</Link></div>-
獲取params的值
<h1>About</h1> <h1>{this.props.params.eeee}</h1>
嵌套 Route
<Router history={browserHistory}>
<Route path='/' component={App}></Route>
<Route path='/about' component={About}>
<IndexRoute component={About_default}></IndexRoute>
<Route path='/about/:eeee' component={About_detail} />
</Route>
<Route path='/product' component={Product}></Route>
</Router>
嵌套 Route 需要注意。在進入子路由的時候，父路由也會執行。看下圖
Paste_Image.png
點擊的路由是自媒體，其鏈接是/about/test , 然而/about 也紅了。
使用 browserHistory
現代瀏覽器運行 JS 操作 URL 而不產生 HTTP 請求，
browserHistory和hashHistory不一樣，使用browserHistory的時候，瀏覽器中導航欄的URL就不會出現hash鍵值對。實際項目中也一般用browserHistory.
<Router history={browserHistory}>
activeStyle,activeClassName
當前路由被點擊處于觸發顯示狀態的時候，這個簡單，沒什么說的
<Link activeClassName="active" to="/">首頁</Link>
<div><Link to="/" activeStyle={{color: 'red'}} >首頁</Link></div>
Redirect重定向 （感覺可以來做404，沒測試）
<Redirect from="*" to="/404" />
文章稿紙的地址詳見github
https://github.com/976500133/react-router-demo
其他的一些特性暫時不說了，使用的不多
