react路由配置方式详解


Posted in Javascript onAugust 07, 2017

本文介绍了react路由配置,最近刚开始学,分享给大家,顺便给自己留个笔记。

react路由配置方式详解

包含了LInk跳转以及js触发跳转并传参。

这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的。

按照顺序来写:detail文件夹下的代码

import React from 'react' 
 
class Detail extends React.Component { 
  render() { 
    return ( 
      <p>Detail,url参数:{this.props.params.id}</p> 
    ) 
  } 
} 
export default Detail 

home:

import React from 'react' 
import { Link } from 'react-router' 
 
class Home extends React.Component { 
  render() { 
    return ( 
      <div> 
        <p>Home</p> 
        <Link to="/list">to list</Link> 
      </div> 
    ) 
  } 
} 
 
export default Home

list:

import React from 'react' 
import { hashHistory } from 'react-router' 
 
class List extends React.Component { 
  render() { 
    const arr = [1, 2, 3] 
    return ( 
      <ul> 
        {arr.map((item, index) => { 
          return <li key={index} onClick={this.clickHandler.bind(this, item)}>js jump to {item}</li> 
        })} 
      </ul> 
    ) 
  } 
  clickHandler(value) { 
    hashHistory.push('/detail/' + value) 
  } 
} 
 
export default List

404yemian:

import React from 'react' 
 
class NotFound extends React.Component { 
  render() { 
    return ( 
      <p>404 NotFound</p> 
    ) 
  } 
} 
 
export default NotFound

在containers下面有一个app.jsx总入口文件:

import React from 'react' 
 
class App extends React.Component { 
  render() { 
    return ( 
      <div>{this.props.children}</div> 
    ) 
  } 
} 
 
export default App

router文件夹下的:

import React from 'react' 
import { Router, Route, IndexRoute } from 'react-router' 
 
import App from '../containers/App' 
import Home from '../containers/Home' 
import List from '../containers/List' 
import Detail from '../containers/Detail' 
import NotFound from '../containers/NotFound' 
 
class RouteMap extends React.Component { 
  updateHandle() { 
    console.log('每次router变化之后都会触发') 
  } 
  render() { 
    return ( 
       <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}> 
        <Route path='/' component={App}> 
          <IndexRoute component={Home}/> 
          <Route path='list' component={List}/> 
          <Route path='detail/:id' component={Detail}/> 
          <Route path="*" component={NotFound}/> 
        </Route> 
      </Router> 
    ) 
  } 
} 
 
export default RouteMap

最终最外层的index.js:

import React from 'react' 
import { render } from 'react-dom' 
import { hashHistory } from 'react-router' 
 
import RouteMap from './src/router/routeMap' 
 
render( 
  <RouteMap history={hashHistory}/>, 
  document.getElementById('App') 
)

使用的router版本是^2.8.1,如果下载的是4.0以上的版本,那么写法就和现在的几乎是完全不一样,他做了很大的改动,配置的时候注意router的版本号。

项目地址https://github.com/wineSu/myReact/tree/master/src/containers

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js变换显示图片的实例
Apr 16 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 #Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
bootstrap table表格客户端分页实例
Aug 07 #Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 #Javascript
react native实现往服务器上传网络图片的实例
Aug 07 #Javascript
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
JS 对象介绍
2010/01/20 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
详解vue 组件注册
2020/11/20 Vue.js
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python模块导入的细节详解
2018/12/10 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
PHP面试题附答案
2015/11/28 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
好邻里事迹材料
2014/01/16 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
CAD实训总结范文
2015/08/03 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
redis lua限流算法实现示例
2022/07/15 Redis