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 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
解决vue移动端适配问题
Dec 12 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
在Vue中使用antv的示例代码
Jun 29 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python list操作用法总结
2015/11/10 Python
用Python设计一个经典小游戏
2017/05/15 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python IDLE清空窗口的实例
2018/06/25 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python通过format函数格式化显示值
2020/10/17 Python
酒店员工职业生涯规划
2014/02/25 职场文书
高三家长寄语
2014/04/03 职场文书
合作协议书
2014/04/23 职场文书
希特勒的演讲稿
2014/05/23 职场文书
校庆活动策划方案
2014/06/05 职场文书
市场调查策划方案
2014/06/10 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP