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 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue组件生命周期详解
Nov 07 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
PHP常用的小程序代码段
2015/11/14 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
js函数调用的方式
2014/05/06 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python中的元类编程入门指引
2015/04/15 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python线程的几种创建方式详解
2019/08/29 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
煤矿安全生产责任书
2014/04/15 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
面试复试通知单
2015/04/24 职场文书
同意离婚答辩状
2015/05/22 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL