react基礎（1）：介紹了如何創建項目，總結了JSX、組件、樣式、事件、state、props、refs、map循環，另外還講了mock數據和ajax
還是用 react基礎1 裏創建的項目繼續寫案例。
react-router
在做單頁面應用的時候就需要用到路由了。
首先來看一下我們的項目目錄，如下所示：
package.json和webpack.config.js的內容和 react基礎（1）一樣的。
下面貼一下entries裏的文件內容
react2/src/entries/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <div id="root"></div> <script src="common.js"></script> <script src="index.js"></script> </body> </html>
react2/src/entries/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render(){
return(
<div>123</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
安裝依賴 npm i
啟動本地服務 npm start
瀏覽器打開瀏覽效果 http://localhost:8989/
效果如下
案例1
react2/src/entries/index.js（其他幾個文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">電影</Link></li>
<li><Link to="/tv">電視劇</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<ul>
<li>還珠格格</li>
<li>來自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<ul>
<li>暮光之城</li>
<li>喜劇之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
Router、Route、Link這三個大家可以看一下教程了解一下定義，這裏不詳細講解：教程戳這裏
關於history的教程戳這裏。常用的History有三種：browserHistory、hashHistory、createMemoryHistory（從react-router引出）。在聲明路由的時候需要指定所選的方式，沒有默認選項。
使用hashHistory,瀏覽器的url是這樣的：/#/user/liuna?_k=adseis
使用browserHistory,瀏覽器的url是這樣的：/user/liuna （大家可以自己試試這種，這裏就不寫案例了）
這個案例寫出來的效果類似tab切換
案例2：
react2/src/entries/index.js（其他幾個文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">電影</Link></li>
<li><Link to="/tv">電視劇</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>還珠格格</li>
<li>來自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜劇之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App} />
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
這個效果就相當於是直接跳轉了頁面，和案例1的tab切換效果不一樣的主要代碼，如下所示
案例1裏面component為Tv和Movie的Route標簽是寫在component為App的Route標簽裏的，而案例2裏相當於是同級的。
案例3
react2/src/entries/index.js（其他幾個文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';
class App extends Component {
render(){
return(
<div>
<p>
<span><Link to="/movie">電影</Link></span>
<span><Link to="/tv">電視劇</Link></span>
</p>
{this.props.children}
</div>
)
}
}
class Home extends Component {
render(){
return(
<div>歡迎你！</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>還珠格格</li>
<li>來自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜劇之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
從上面的效果圖中，可以看到，有“歡迎你！”這個類似首頁的東西。
IndexRoute默認路由，當path=“/”時，默認顯示Home組件。IndexRoute也是從react-router裏引出的。
ps
這篇還是react基礎（1）寫完以後的存貨，好久沒有更新了，先把這篇存貨發了
Tags: gt lt quot 039 react import
文章來源：