依赖
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline --content-base ."
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
引用
import { Router, Route, hashHistory } from 'react-router'
在 App.js
文件,建立路由关系时
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path='/repos/:repoName/:userName' component={Repo}/>
<Route path="/repos" component={Repos}>
// 若此路径重复出现,出现的位置靠前,会覆盖后面的。
// 作为子路径,需要在父组件内render {this.props.children}
// 方可跳转,否则无法跳转至子组件UI
// 注册和render() 缺一不可
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))