- 说明：
a. 引入模块：
b. 定义路径和链接：
c. 定义子路径：
d. 定义单击跳转事件：
-
完整代码：
var React = require('react')
var ReactDom = require('react-dom')
var ReactRouter = require('react-router-dom')
var Router = ReactRouter.BrowserRouter
var Route = ReactRouter.Route
var Link = ReactRouter.Link
var browserHistory = ReactRouter.browserHistory
var CreateClass = require('create-react-class')
var PropTypes = require('prop-types')
var Index = CreateClass({
render:function(){
return (
<Router history={browserHistory}>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/docs">Docs</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/docs" component={Docs}/>
<Route path="/step1" component={Step1}/>
</div>
</Router>
)
}
})
var Home = CreateClass({
render:function(){
return(
<div>
<h3>Home</h3>
</div>
)
}
})
var About = CreateClass({
render:function(){
return(
<div>
<h3>About</h3>
</div>
)
}
})
var Docs = CreateClass({
render:function(){
return(
<div>
<ul>
<li><Link to="/step1">Step1</Link></li>
</ul>
<hr/>
<Route exact path="/step1" component={Step1}/>
</div>
)
}
})
var Step1 = CreateClass({
onClick:function(){
var history = this.props.history
history.push('/')
},
render:function(){
return(
<div>
<span onClick={this.onClick}>回到主页</span>
<h3>Step1</h3>
</div>
)
}
})
ReactDom.render((
<Index/>
), document.body)
- 效果：
a. 主页：
b. 父页面：
c. 子页面：
d. 点击回到主页：
- 手动控制跳转：
a. 引入组件：
var ReactRouter = require('react-router-dom')
var withRouter = ReactRouter.withRouter
b. 使用：
this.props.history.push("/")
c. 导出：
module.exports = withRouter(Login)
- 使用hash路由（使代码打包后可以在本地运行）：
a. 引入模块：
var Router = ReactRouter.HashRouter
b. 使用：
<Router>
<LocaleProvider locale={Cn}>
<div className="index_container">
<Head/>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/login" component={Login}/>
<Route path="/system" component={System}/>
<Route path="/user" component={User}/>
<Foot/>
<Write/>
</div>
</LocaleProvider>
</Router>
- 404页面：
a. 引入：
var Switch = ReactRouter.Switch
b. 定义：
<Switch>
<Route exact path="/some/path" component={XXX}/>
<Route path="*" component={Notfound}/>
</Switch>