以下代碼，React-router 是 2.x 版，本文的內容只適合這個版本，與最新的 4.x 版不兼容。目前，官方同時維護 2.x 和 4.x 兩個版本，所以前者依然可以用在項目中。
效果圖：
image.png
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory,browserHistory,Link,IndexRoute,Redirect,IndexLink } from 'react-router';
require('./style.css');
/**
* 本節知識點：
* 路由的通配符匹配：
* 1.路由匹配規則是從上到下執行，一旦發現匹配，就不再其余的規則了。
* 2.()是可選匹配
* 3.*是任意字符匹配
* 4.**貪婪模式，在不確定參數個數的情況下匹配
*
* 5.記住一個原則： 像這種通配符的匹配，寫在最底部，防止出現以下情況:
* <Router>
<Route path="/:userName/:id" component={UserPage}/>
<Route path="/about/me" component={About}/>
</Router>
上面代碼中，用戶訪問/about/me時，不會觸發第二個路由規則，
因為它會匹配/:userName/:id這個規則。因此，帶參數的路徑一般要寫在路由規則的底部。
其他知識點：
1.關于Link 組件的 activeClassName 屬性與 activeStyle
是指定 如果是訪問了當前的 路由,就指定 class樣式， activeStyle 是內聯樣式
2.關于IndexRoute 組件。 當用戶訪問 / 的時候顯示， 注意：
IndexRoute 沒有 path 屬性
3.在Router組件之外，導航到路由頁面，可以使用瀏覽器的History API，像下面這樣寫。
browserHistory.push('/some/path');
4.關于 IndexLink 和 onlyActiveOnIndex 屬性
IndexLink其實就是 onlyActiveOnIndex 的包裝而已， 2者的效果是一樣的
因為/會匹配任何子路由。而IndexLink組件會使用路徑的精確匹配。
如果鏈接到根路由/，不要使用Link組件，而要使用IndexLink組件。
這是因為對于根路由來說，activeStyle和activeClassName會失效，或者說總是生效，
5.關于 history屬性，一共有3個屬性，分別是：
1.browserHistory
如果設為browserHistory，瀏覽器的路由就不再通過Hash完成了，而顯示正常的路徑example.com/some/path，
背后調用的是瀏覽器的History API。
2.hashHistory
如果設為hashHistory，路由將通過URL的hash部分（#）切換，URL的形式類似example.com/#/some/path。
3.createMemoryHistory
createMemoryHistory主要用于服務器渲染。它創建一個內存中的history對象，不與瀏覽器URL互動.
const history = createMemoryHistory(location)
*/
//browserHistory.push('/List');
/**
* 可選參數的匹配x
*/
class About extends React.Component {
render() {
return <div>
這個路由匹配是： 可選匹配 <br />
接受參數name:{this.props.params.name}
</div>;
}
}
/**
* 指定參數個數時的匹配
* @returns {XML}
* @constructor
*/
const List = ()=> {
return <div>
<ul>
<li><Link to="/List/test01/react">react</Link></li>
<li><Link to="/List/test02/vue">vue</Link></li>
</ul>
</div>;
}
class ListChild extends React.Component {
render() {
return <div>{this.props.params.myArgs}</div>;
}
}
/**
* 匹配 *.*的路由
*/
class File extends React.Component {
render() {
//如果是 這種*號匹配，取值應該這樣取：
var args = this.props.params.splat;
return <div>{args.join(".")}</div>;
}
}
class Greed extends React.Component {
render() {
//如果是 這種** 貪婪批量，取值應該這樣?。? var args = this.props.params.splat;
return <div>{args.join(".")}</div>;
}
}
/**
* 默認訪問
*/
class Home extends React.Component {
render() {
return <div>直接通過域名訪問顯示的頁面..</div>;
}
}
/**
* 路由鉤子案例
*/
class MemberCenter extends React.Component {
render() {
return <div>您已進入會員中心..</div>;
}
}
class APP extends React.Component {
handleSubmit(event) {
event.preventDefault();
//console.log(event.target.elements);
const name = this.refs.name.value;
const job = this.refs.job.value;
const path = `/greed/${name}/${job}.jpg`;
browserHistory.push(path);
// this.context.router.push(path)
}
render() {
return (
<div>
React Router 常用操作：
<ul>
<li><IndexLink to="/" activeClassName="active" component={Home}>通過IndexLink返回首頁</IndexLink></li>
<li><Link onlyActiveOnIndex activeClassName="active" to="/">通過onlyActiveOnIndex返回首頁</Link></li>
</ul>
<ul>
<li><Link activeClassName="active" to="About">About不帶參數訪問</Link></li>
<li><Link activeClassName="active" to="/About/loycoder">About攜帶參數</Link></li>
</ul>
<ul>
<li><Link activeClassName="active" to="/List">list 多層路由規則指向</Link></li>
</ul>
<ul>
<li><Link activeClassName="active" to="/renyi/index.php">指定后綴的，任意字符匹配-模式1</Link></li>
<li><Link activeClassName="active" to="/renyi/index.html">指定后綴的，任意字符匹配-模式2</Link></li>
</ul>
<ul>
<li><Link activeClassName="active" to="/greed/參數1/參數2/參數N/1.jpg">貪婪模式匹配，【在不確定參數個數的情況下使用】</Link></li>
</ul>
<ul>
<li><Link activeClassName="active" to="/redirect">路由跳轉</Link></li>
</ul>
<hr />
<ul>
<li>路由鉤子的使用</li>
<li><Link to="/Auth">點擊進入會員中心?！井斍凹僭O未登錄】</Link></li>
</ul>
{this.props.children}
<hr />
<p>表單處理，提交參數</p>
<form onSubmit={this.handleSubmit.bind(this)}>
<ul>
<li>姓名:<input ref="name" type="text"/></li>
<li>職業:<input ref="job" type="text"/></li>
<li><input type="submit" value="submit"/></li>
</ul>
</form>
</div>
);
}
}
/**
* 進入路由的驗證
*/
const onEnter = (nextState, replace) => {
if (1 == 2) { //假設未登錄
alert('您沒有登錄，將跳轉到首頁');
replace({pathname: '/'})
}
}
const onLeave=(nextState, replace) => {
alert('即將要離開');
return false;
}
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={APP}>
<IndexRoute component={Home}/>
<Redirect from="/redirect" to="/About/我是跳轉攜帶的參數"/>
<Route path="/List" component={List}></Route>
<Route path="/List/:myName/:myArgs" component={ListChild}></Route>
<Route path="About(/:name)" component={About}/>
<Route path="renyi/*.*" component={File}/>
<Route path="/greed/**/*.jpg" component={Greed}/>
{/*當用戶進入路由，和離開路由的驗證*/}
<Route path="/Auth" onEnter={onEnter} onLeave={onLeave} component={MemberCenter}></Route>
</Route>
</Router>,
document.getElementById('app')
);
