React Router路由的簡單使用方法
路由系統可以在瀏覽器的URL發生改變的時候,做出一些響應,使頁面與URL同步。
React Router是為React設計的一款路由庫。
效仿官方示例庫,用一個簡單的例子,瞭解路由的一些特性。使用es6。
效果如圖:
1,配置web pack,安裝依賴( react, react-dom, react-router等等 )
在根目錄建立modules目錄,在modules中建立App.js,程式碼如下:
import React, { Component } from 'react' export default class App extends Component { render() { return ( <div>Team</div> ); } }
在根目錄建立入口檔案index.js,並引入Router和App,渲染到網頁上
import { Router, Route, hashHistory } from 'react-router' import React from 'react' import ReactDOM from 'react-dom' import App from './modules/App.js' ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={App} /> </Router>, document.getElementById('app') );
Router是一個容器,路由通過Route來定義
path=“/”,component={App} 代表當用戶訪問根路由/時,App通過document.getElementById('app')渲染。
根目錄建立index.html,引入web pack打包生成的bundle.js
<!doctype html public "storage"> <html> <meta charset=utf-8/> <title>React Router</title> <div id=app></div> <script src="bundle.js"></script>
執行程式,網頁 http://localhost:8080/ 上顯示出Team
2,在modules目錄裡建立另外兩個js檔案,分別命名為War.js,Lak.js,程式碼如下
// War.js
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>Warrior</div>
)
}
}
//Lak.js
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>Laker</div>
)
}
}
在index.js中增加程式碼,需要引入剛才建立的Lak.js和War.js
//index.js
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/War" component={War} />
<Route path="/Lak" component={Lak} />
</Router>,
document.getElementById('app')
);
手動在瀏覽器中輸入http://localhost:8080/#/War和http://localhost:8080/#/Lak分別顯示Warrior和Laker
3,改變程式,將War.js和Lak.js引入App.js
import React, { Component } from 'react'
import War from './War.js'
import Lak from './Lak.js'
import { Link } from 'react-router'
export default class App extends Component {
render() {
return (
<div><h2>Team</h2>
<ul>
<li><Link to="/War">War</Link></li>
<li><Link to="/Lak">Lak</Link></li>
</ul>
</div>
)
}
}
Link元件生成一個連線,允許使用者點選後跳轉到另一個路由。基本就是React版本的<a>元素。to匹配Route中的path,接受Router狀態,指定要跳到哪個路由。
在網頁上點選War和Lak將進入指定的URL
4,使用巢狀路由,改變index.js,使指向War和Lak的Route做為Router的子元件
<Route path="/" component={App} >
<Route path="/War" component={War} />
<Route path="/Lak" component={Lak} />
</Route>
在App.js的<ul>下面加上一句{this.props.children}
………
</ul>
{this.props.children}
………
在網頁上點選War和Lak。Url改變,Warrior和Laker將顯示在Lak下方
為了使點選的元素更容易辨識,將點選的元素顏色變為綠色,從而用到了activeStyle。
<li><Link activeStyle={{color: "green"}} to="/War">War</Link></li>
<li><Link activeStyle={{color: "green"}} to="/Lak">Lak</Link></li>
5,使用params
在modules目錄下建立Player.js
import React, { Component } from 'react'
export default class Lak extends Component {
render() {
return (
<div>{this.props.params.name}</div>
);
}
}
修改War.js
import React, { Component } from 'react'
import { Link } from 'react-router'
export default class War extends Component {
render() {
return (<div><h2>Warrior</h2>
<ul>
<li><Link to="War/Curry" activeStyle={{color: "red"}}>Steven</Link></li>
<li><Link to="War/Durant" activeStyle={{color: "red"}}>Kevin</Link></li>
</ul>
{this.props.children}
</div>
);
}
}
修改index.js
import { Router, Route, hashHistory } from 'react-router'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './modules/App.js'
import Lak from './modules/Lak.js'
import War from './modules/War.js'
import Player from './modules/Player.js'
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/War" component={War}>
<Route path="/War/:name" component={Player}/>
</Route>
<Route path="/Lak" component={Lak}/>
</Route>
</Router>,
document.getElementById('app')
);
點選War, 再點選Steven或Kevin,出現Curry或Durant
6,設定history
history有三種類型: browserHistory, hashHistory, createMemoryHistory
hashHistory:路由通過URL的(#)切換,URL中包含#
browserHistory:沒有#,顯示正常路徑,但是使用者直接向伺服器請求某個子路由時,會顯示網頁找不到。
解決方法:執行時終端輸入 webpack-dev-server —inline —content-base . ——history-api-fallback
7,使用表單
在War中新增表單,使用browserHistory.push(path)來跳轉
import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
export default class War extends Component {
render() {
return (
<div><h2>Warrior</h2>
<ul>
<li><Link to="War/Curry" activeStyle={{color: "red"}}>Steven</Link></li>
<li><Link to="War/Durant" activeStyle={{color: "red"}}>Kevin</Link></li>
</ul>
<form onSubmit={this.handleSubmit}>
<input type="text"/>
<button type="submit">Go</button>
</form>
{this.props.children}
</div>
);
}
handleSubmit(event) {
event.preventDefault();
const name = event.target.elements[0].value;
const path = "War/" + name;
browserHistory.push(path);
}
}
input框中輸入,點選按鈕GO,下面出現輸入的內容。
OK!!!