react-router基本用法-创新互联

1. 说明：
   a. 引入模块：
   
   b. 定义路径和链接：
   
   c. 定义子路径：
   
   d. 定义单击跳转事件：
   

2. 完整代码：

   

   创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站建设、成都外贸网站建设、桥东网络推广、小程序开发、桥东网络营销、桥东企业策划、桥东品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联建站为所有大学生创业者提供桥东建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

   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)

3. 效果：
   a. 主页：
   
   b. 父页面：
   
   c. 子页面：
   
   d. 点击回到主页：
   
4. 手动控制跳转：
   a. 引入组件：

   var ReactRouter = require('react-router-dom')
   var withRouter = ReactRouter.withRouter

   
   b. 使用：

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

   
   c. 导出：

   module.exports = withRouter(Login)

   

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

   var Router = ReactRouter.HashRouter

   
   b. 使用：

   

6. 404页面：
   a. 引入：

   var Switch = ReactRouter.Switch

   b. 定义：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

名称栏目：react-router基本用法-创新互联
网址分享：http://6mz.cn/article/dejipj.html