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 事件参考手册
Dec 24 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
el-form 多层级表单的实现示例
Sep 10 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python中协程用法代码详解
2018/02/10 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Django stark组件使用及原理详解
2019/08/22 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
如何利用python发送邮件
2020/09/26 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
StringBuilder和String的区别
2015/05/18 面试题
甜点店创业计划书
2014/01/27 职场文书
期中考试后的反思
2014/02/08 职场文书
一年级小学生评语
2014/04/22 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
高中生旷课检讨书
2014/10/08 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android