// modules/Repo.js import React from 'react' export default React.createClass({ render() { return ( <div> {/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */} <h2>{this.props.params.repoName}</h2> </div> ) } })
// index.js // ... // import Repo import Repo from './modules/Repo' render(( <Router history={hashHistory}> <Route path="https://www.jb51.net/" component={App}> <Route path="/repos" component={Repos}/> {/* 注意这里的路径 带了 ：参数 */} <Route path="/repos/:userName/:repoName" component={Repo}/> <Route path="/about" component={About}/> </Route> </Router> ), document.getElementById('app'))
接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。
六 默认路由
// index.js import { Router, Route, hashHistory, IndexRoute } from 'react-router' // and the Home component import Home from './modules/Home' // ... render(( <Router history={hashHistory}> <Route path="https://www.jb51.net/" component={App}> {/* 注意这里* /} <IndexRoute component={Home}/> <Route path="/repos" component={Repos}> <Route path="/repos/:userName/:repoName" component={Repo}/> </Route> <Route path="/about" component={About}/> </Route> </Router> ), document.getElementById('app'))
这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。
同理也有 默认链接组件 IndexLink。、
七 使用Browser History
前面的例子一直使用的是hashHistory，因为它一直可以运行，但更好的方式是使用Browser History，它可以不依赖哈希端口 （#）。
首先需要改 index.js:
// ... // bring in `browserHistory` instead of `hashHistory` import { Router, Route, browserHistory, IndexRoute } from 'react-router' render(( {/* 注意这里 */} <Router history={browserHistory}> {/* ... */} </Router> ), document.getElementById('app'))
其次需要 修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ：
复制代码 代码如下:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
最后需要在 index.html中 将文件的路径改为相对路径：
<!-- index.html --> <!-- index.css 改为 /index.css --> <link href="https://www.jb51.net/index.css" > <!-- bundle.js 改为 /bundle.js --> <script src="https://www.jb51.net/bundle.js"></script>
这样就去掉了url中的 # 。