react路由尝试

react使用router的尝试。

关于路由嵌套

Route组件还可以嵌套。







App组件要写成下面的样子。
export default React.createClass({
render() {
return


{this.props.children}

}
})
这样App 岂不是 失去了自己的定义
如果写成下面,会发生什么? _ques
export default React.createClass({
render() {
return


{this.props.children}

}
})

路径匹配的通配符取值

:paramName
:paramName匹配URL的一个部分,直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName
是怎么取得? _ques

URL的查询字符串/foo?bar=baz,可以用this.props.location.query.bar获取。同问? _ques

link组件

Link组件用于取代元素,可以接收Router的状态。 _ques

histroy 属性

hashHistory 最适合只有browser的应用。通过hash切换
browserHistory 需要改造服务器,请求浏览器的api History API。显示正常的路径
createMemoryHistory

对于 browserHistory
如果开发服务器使用的是webpack-dev-server,加上–history-api-fallback参数就可以了。
$ webpack-dev-server –inline –content-base . –history-api-fallback _ques
用于表单中路径的跳转。此为方法1。

表单路径跳转还可以
使用context对象,方法2.
export default React.createClass({

// ask for router from context
contextTypes: {
router: React.PropTypes.object
},

handleSubmit(event) {
// …
this.context.router.push(path)
},
})
难道就不能直接使用 hashHistory跳转?方法3。 _ques

正在准备一个react webapp,上述问题,等待我实践中验证。

相关连接

React Router 使用教程 by 阮一峰