React全家桶之一 react-router之高级

使用query获取URL中的参数

//引入相关的依赖

const Page = props =>
    <div>
        <h1>{props.location.query.message}</h1>
    <div>

然后在URL中输入http://localhost:8080/#/?message=wn,

页面中就会显示wn

另外我们还可以在组件中Link中设置pathname和query变量

//依然是引入各种依赖

<Link to={{ pathname:‘/‘ , query:‘wangyong‘ }} />

嗯呢,就是这个样子的

附上一个地址::::   http://cnodejs.org/topic/573f2756fcf698421d20371f

时间: 2024-11-11 11:11:59

React全家桶之一 react-router之高级的相关文章

vue全家桶和react全家桶

vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + redux(状态管理) +react-router(路由) + axios + antd || antd-model 原文地址:https://www.cnblogs.com/aibabel/p/11827851.html

手把手教你全家桶之React(一)

前言 最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址.废话不多说,上码. 创建一个文件目录并初始化package.json mkdir react-Buckets npm init 填好相关信息如图 安装webpack 需要有全局安装哦,不然一会用webpack编译时会报错的 关于装依赖加入package.json时,加 --save-dev表示开发环境要用的依赖,如果加 -save表示

react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况. 从webpack开始 思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖链接:https://pan.baidu.com/s/15-9Ne3vFEFPzJA0wyltxrg 提取码:加Q:1642261812 V信:SH66668888QH 获取 第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用

react全家桶-1

全家桶内装有: react - github react-router - github redux - github react-redux - github react-router-redux - github redux-saga - github immutable - github reselect - github antd - github 服务端: json server 作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELET

React全家桶+AntD 共享单车后台管理系统开发

第1章 课程导学对课程整体进行介绍,并且说明学习的必要性. 1-1 课程导学第2章 React基础知识React基础知识以及生命周期的介绍,并使用React官方脚手架初始化基础项目,同时介绍了新一代打包工具Yarn. 2-1 React基础介绍2-2 React脚手架使用2-3 React生命周期介绍第3章 主页面架构设计详细介绍了初始项目的插件安装.主题定制以及主页面结构设计. 3-1 基础插件安装(1)3-2 基础插件安装(2)3-3 页面结构开发(1)3-4 页面结构开发(2)3-5 菜单

【React全家桶入门之十】登录与身份认证

仔细想想,我们的后台系统还没有一个登录功能,太不靠谱,赶紧把防盗门安上! SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和session来进行身份认证. 比较流行的一种方式是使用web token,所谓的token可以看作是一个标识身份的令牌.客户端在登录成功后可以获得服务端加密后的token,然后在后续需要身份认证的接口请求中在header中带上这个to

2019教你用react全家桶+node.js全栈开发大型电商后台管理系统(视频+源码+课件)

主要内容:1. 业务功能模块: 用户登陆.商品分类管理.商品管理.角色管理.用户管理.菜单权限控制.订单管理等2. 前端技术: React + React Router4 + Redux + Antd + Axios + ES6/ES8 + webpack + ECharts/Bizcharts 等 3. 后端技术: NodeJS + Express + MongoDB + Mongoose + Multer 等 4. 项目开发模式: 模块化.组件化.工程化的开发模式 5. 深入源码: 自定义R

react基础---react全家桶03

目录: 1. redux 1.1 原始,原始步骤 1.2 react-reducer,两种写法(导出普通写法 和 装饰器的写法) 1.3 存储多个reducer 2. redux中间键,redux-logger | redux-thunk 异步请求,调用dispatch 3. router 基本:BrowserRouter, Link, Route, Switch, Redirect(tab中默认页面),404 传参 路由守卫 内容: 1. redux 安装 #npm install redux