[React] Create a Query Parameter Modal Route with React Router
Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders.
Modal should be created as a 'Portal':
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="modal_root"></div>
</body>
import React, { Component } from "react";
import { createPortal } from "react-dom";
const modalStyle = {
position: "fixed",
left: 0,
top: 0,
bottom: 0,
right: 0,
backgroundColor: "rgba(0,0,0,.2)",
color: "#FFF",
fontSize: "40px",
};
export default class Modal extends Component {
render() {
return createPortal(
<div style={modalStyle} onClick={this.props.onClick}>
{this.props.children}
</div>,
document.getElementById("modal_root"),
);
}
}
If we want to show the Modal everywhere in the page, we need to declear the Router outside 'Switch' component:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css"; import { BrowserRouter, Switch, Route } from "react-router-dom";
import HomePage from "./pages/home";
import ProfilePage from "./pages/profile";
import Login from "./pages/login"; const routes = (
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/profile" component={ProfilePage} />
</Switch>
<Route path="/" component={Login} />
</BrowserRouter>
); ReactDOM.render(routes, document.getElementById("root"));
For all the routes re-render, Login component will be shown.
Inside Login componnet, control the component show / hide by query param:
import React, { Component } from "react";
import Modal from "./modal";
export default class LoginPage extends Component {
render() {
let params = new URLSearchParams(this.props.location.search);
return (
params.get("login") && (
<Modal
onClick={() => {
this.props.history.push(this.props.location.pathname);
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
}}
>
Login modal
</div>
</Modal>
)
);
}
}
Using:
<Link to={{ pathname: "/", search: "?login=true" }}>Login</Link>
[React] Create a Query Parameter Modal Route with React Router的更多相关文章
- IDEA+MySQL实现登录注册的注册验证时出现 Cannot resolve query parameter '2'
问题描述: 在IDEA+MySQL+Tomcat 实现登录注册JSP的注册信息INSERT验证时出现 Cannot resolve query parameter '2' 贴上创建链接的代码: if( ...
- DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)
PowerBI - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...
- 路由传值及获取参数,路由跳转，路由检测，this.$route.query和this.$route.params接收参数，HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...
- React报错之Parameter 'event' implicitly has an 'any' type
正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决 ...
- react看这篇就够了（react+webpack+redux+reactRouter+sass）
本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...
- this.$route和this.$router区别
this.$route 和 this.$router 这两个对象有什么区别: this.$route 是当前路由跳转对象,包含当前路由的name.path.query.params等属性 this.$ ...
- Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native
Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...
- React与ES6（四）ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
随机推荐
- python基础学习记录......
1.IDEA写python 打开IDEA,File--->settings---->Plugins 输入python 安装 重启IDEA 2.新建Project 选择P ...
- 关于mq的思考
解耦场景 spark 发告警,同过kafka来解耦 削峰场景 日志采集生产环境几百台,当后续数量持续增加时,如果不加消息队列或者内存队列,可能把数据库打死 一个中间件: 为什么用 ->解决什么问 ...
- Redis键的基本操作
1.Redis键的键名查询 ·命令名称:KEYS ·语法:KEYS pattern ·Pattern的用法: ? 任意一个字符 * 任意个任意字符 [ae] a或者e [^ae] 除了a和e [a-c ...
- 使用SplFixedArray创建固定大小的数组
PHP在定义数组的时候不用像C或Java一样定义数组大小,PHP数组可以根据我们的需要增长或收缩.但这种灵活性在内存使用方面带来很大的不便. 而PHP中可以使用SplFixedArray创建固定大小的 ...
- Mysql分表和分区的区别、分库和分表区别
一,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看:mysql分表的3种方法. 什么是分区,分区呢就是把一张表的数据分成N多个区块,这些区块可以在同一个 ...
- SQL优化中的重要概念：阻塞
原文:SQL优化中的重要概念:阻塞 上一篇讲到锁定的概念,那么接下来就是如何找到由于锁定而发生阻塞的进程,并解决阻塞问题. 1.会话1,修改数据,但没有提交事务 BEGIN TRAN select @ ...
- 运维MES的日子里
可以看下<工业软件国内与国外差距,越来越小还是越来越大>.<MES技术国内现状与未来发展趋势>及<国际主要MES厂商>,总结来说中国工业是进步的,工业软件也是进步的 ...
- Rsync同步过程中遇到的常见问题
一.Rsync服务介绍 Rsync属于一款实现全量及增量同步数据的软件工具,适用于unix/linux/windows等多种操作系统平台. Rsync软件能实现本地复制,远程复制,或者远程守护进程方式 ...
- Android Service的有关总结
来自一位网友的评论 1.使用方式 startService 启动的服务 主要用于启动一个服务执行后台任务,不进行通信.停止服务使用stopService bindService 启动的服务 该方法启动 ...
- Vivado问题集锦
1.添加包含子IP的模块到block design,报错如下所示: 错误的后面提供了解决方法:在tcl命令行中输入如下指令,添加子IP的xci文件即可. set_property generate_s ...