react-router基本用法
- 说明：
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 (
)
}
})
var Home = CreateClass({
render:function(){
return(
Home
)
}
})
var About = CreateClass({
render:function(){
return(
About
)
}
})
var Docs = CreateClass({
render:function(){
return(
)
}
})
var Step1 = CreateClass({
onClick:function(){
var history = this.props.history
history.push('/')
},
render:function(){
return(
回到主页
Step1
)
}
})
ReactDom.render((
), 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. 使用：
404页面：
a. 引入：
var Switch = ReactRouter.Switch
b. 定义：
网站栏目：react-router基本用法
当前链接：
http://cdkjz.cn/article/pdcoeg.html
