一、安装
npm install --save react-router
安装后使用一个支持CommonJS或ES2015的模块管理,比如 webpack
:
npm install
webpack 或 cnpm install
webpack
npm
i
-
g webpack webpack
-dev
-
server 或 cnpm
i
-
g webpack webpack
-dev
-
server
安装react npm install react 或 cnpm i react
安装react-dom npm install react-dom 或 cnpm i react-dom
再安装package.json中的开发配置项,nam install 或 cnpm install
最后终端 nam start 运行配置脚本命令
参见react-router中文手册
http://react-guide.github.io/react-router-cn/docs/Introduction.html
使用例子参见github上的例子
https://github.com/GitHub-Larry/react-router-tutorial
在react中一个路由对应一个组件
使用前需要在项目目录下 npm install 下载package.json中的开发依赖
1、demo1 路由渲染
index.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'
render((
< Router history ={hashHistory}>
/*根路径对应App组件*/
< Route path ="/" component ={App}/>
{ /* add the routes here */}
/* /repos路径对应Repos组件*/
< Route path ="/repos" component ={Repos}/>
/* /About路径对应About组件*/
< Route path ="/about" component ={About}/>
</ Router>
), document. getElementById( 'app'));
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'
render((
< Router history ={hashHistory}>
/*根路径对应App组件*/
< Route path ="/" component ={App}/>
{ /* add the routes here */}
/* /repos路径对应Repos组件*/
< Route path ="/repos" component ={Repos}/>
/* /About路径对应About组件*/
< Route path ="/about" component ={About}/>
</ Router>
), document. getElementById( 'app'));
App组件
import React
from
'react'
export default React.createClass({
render() {
return < div> Hello, React Router!</ div>
}
})
export default React.createClass({
render() {
return < div> Hello, React Router!</ div>
}
})
Repos组件
import React from 'react'
export default React.createClass({
render() {
return < div> Repos</ div>
}
})
About组件
import React from 'react'
export default React.createClass({
render() {
return < div> About</ div>
}
})
webpack.config.js配置文件
module.
exports
= {
entry : './index.js',
output : {
filename : 'bundle.js',
publicPath : ''
},
module : {
loaders : [
{ test : /\.js$/, exclude : /node_modules/, loader : 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
entry : './index.js',
output : {
filename : 'bundle.js',
publicPath : ''
},
module : {
loaders : [
{ test : /\.js$/, exclude : /node_modules/, loader : 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
2、demo2 通过链接来导航
‘link’和a类似,只不过link能感知到路由
index.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'
render((
< Router history ={hashHistory}>
< Route path ="/" component ={App}/>
< Route path ="/repos" component ={Repos}/>
< Route path ="/about" component ={About}/>
</ Router>
), document. getElementById( 'app'));
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'
render((
< Router history ={hashHistory}>
< Route path ="/" component ={App}/>
< Route path ="/repos" component ={Repos}/>
< Route path ="/about" component ={About}/>
</ Router>
), document. getElementById( 'app'));
App组件
import React
from
'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
< div>
< h1> React Router Tutorial</ h1>
< ul role ="nav">
< li>< Link to ="/about"> About</ Link></ li>
< li>< Link to ="/repos"> Repos</ Link></ li>
</ ul>
</ div>
)
}
})
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
< div>
< h1> React Router Tutorial</ h1>
< ul role ="nav">
< li>< Link to ="/about"> About</ Link></ li>
< li>< Link to ="/repos"> Repos</ Link></ li>
</ ul>
</ div>
)
}
})
Repos组件
import React
from
'react'
export default React.createClass({
render() {
return < div> Repos</ div>
}
})
export default React.createClass({
render() {
return < div> Repos</ div>
}
})
About组件
import React
from
'react'
export default React.createClass({
render() {
return < div> About</ div>
}
})
export default React.createClass({
render() {
return < div> About</ div>
}
})
3、内嵌路由
index.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'
render((
< Router history ={hashHistory}>
< Route path ="/" component ={App}>
/* 把它们嵌套在App组件中,使其变成组件App的孩子 */
< Route path ="/repos" component ={Repos}/>
< Route path ="/about" component ={About}/>
</ Route>
</ Router>
), document. getElementById( 'app'));
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'
render((
< Router history ={hashHistory}>
< Route path ="/" component ={App}>
/* 把它们嵌套在App组件中,使其变成组件App的孩子 */
< Route path ="/repos" component ={Repos}/>
< Route path ="/about" component ={About}/>
</ Route>
</ Router>
), document. getElementById( 'app'));
App组件
import React
from
'react'
import { Link } from 'react-router'
export default React. createClass({
render() {
return (
< div>
< h1> React Router Tutorial</ h1>
< ul role ="nav">
< li>< Link to ="/about"> About</ Link></ li>
< li>< Link to ="/repos"> Repos</ Link></ li>
</ ul>
{ this.props.children}
</ div>
)
}
})
import { Link } from 'react-router'
export default React. createClass({
render() {
return (
< div>
< h1> React Router Tutorial</ h1>
< ul role ="nav">
< li>< Link to ="/about"> About</ Link></ li>
< li>< Link to ="/repos"> Repos</ Link></ li>
</ ul>
{ this.props.children}
</ div>
)
}
})
Repos组件
import React
from
'react'
export default React. createClass({
render() {
return < div> Repos</ div>
}
})
export default React. createClass({
render() {
return < div> Repos</ div>
}
})
About组件
import React
from
'react'
export default React. createClass({
render() {
return < div> About</ div>
}
})
export default React. createClass({
render() {
return < div> About</ div>
}
})