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自定义的函数
Aug 05 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP扩展开发入门教程
2015/02/26 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
js评分组件使用详解
2017/06/06 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python如何获取apk的packagename和activity
2020/01/10 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
梅花魂教学反思
2014/04/25 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
文秘自荐信
2014/06/28 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
Python中的套接字编程是什么?
2021/06/21 Python