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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
Terran剧情介绍
2020/03/14 星际争霸
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python中正则表达式的详细教程
2015/04/30 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
客运企业隐患排查工作方案
2014/06/06 职场文书
幼儿老师求职信
2014/06/30 职场文书
小学中队长竞选稿
2015/11/20 职场文书
图解上海144收音机
2021/04/22 无线电