react-router基本用法-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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 (
        
            
                
                    Home
                    About
                    Docs
                
                
                
                
                
                
            
        
    )
}
})
var Home = CreateClass({
render:function(){
    return(
        
            Home
        
    )
}
})
var About = CreateClass({
render:function(){
    return(
        
            About
        
    )
}
})
var Docs = CreateClass({
render:function(){
    return(
        
            
                Step1
            

            

            
        
    )
}
})
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

react-router基本用法
b. 使用：

this.props.history.push("/")

react-router基本用法
c. 导出：

module.exports = withRouter(Login)

react-router基本用法

使用hash路由（使代码打包后可以在本地运行）：
a. 引入模块：

var Router = ReactRouter.HashRouter

react-router基本用法
b. 使用：

react-router基本用法

404页面：
a. 引入：
```
var Switch = ReactRouter.Switch
```
b. 定义：

网站栏目：react-router基本用法
链接分享：http://lswzjz.com/article/pdcoeg.html

新闻中心

Home

About

Step1

其他资讯