渲染 Route
import { Router, Route, hashHistory } from 'react-router'
render((
), document.getElementById('app'))
增加页面
modules/Boys.js
import React from 'react'
export default React.createClass({
render(){
return 我是男神！
}
})
modules/Girls.js
import React from 'react'
export default React.createClass({
render(){
return 我是女神！
}
})
使用 Route 组件导航
import React from 'react'
import {render} from 'react-dom'
import {Router,Route,hashHistory} from 'react-router'
import App from './modules/App'
import Boys from './modules/Boys'
import Girls from './modules/Girls'
render({
}, document.getElementById('app'))
使用 Link 进行跳转组件
modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render(){
return {
明星特区
{this.props.children}
}
}
})
从 Link 到 NavLink
modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render(){
return
}
})
App.js
import NavLink from './NavLink'
男神 女神 URL 参数的传递
module/Boys.js
import React from 'react'
export default React.createClass({
render() {
return (
大家好，我是{this.props.params.boyName}！
)
}
})
index.js
修改 Link
宋仲基
嵌套 Route
index.js
Boys.js
我的男神们：
- 宋仲基
- 吴亦凡
{this.props.children}
App.js
import NavLink from './NavLink'
// ...
宋仲基 吴亦凡 IndexRoute 首页默认路由
modules/Home.js
import React from 'react'
export default React.createClass({
render(){
return 男生与女生
}
})
App.js
import Home from './Home'
// ......
{this.props.children|| index.js
// ...
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import Home from './modules/Home'
// ...
render((
), document.getElementById('app'))
IndexLink
import { IndexLink, Link } from 'react-router'
// ...
Home
// ...
不是当前组件子路由被激活，该路由才会显示
Home
使用 browserHistory
现代浏览器运行 JS 操作 URL 而不产生 HTTP 请求
// ...
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
//...
), document.getElementById('app'))
使用程序控制导航
import React from 'react'
import NavLink from './NavLink'
export default React.createClass({
contextTypes: {
router: React.PropTypes.object
},
// add this method
handleSubmit(event) {
event.preventDefault()
const boyName = event.target.elements[0].value
const path = `/repos/${boyName}`
this.context.router.push(path)
console.log(path)
},
render() {
return (
我的男神们：
宋仲基 吴亦凡 -
{this.props.children}
)
}
})