[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 ...
随机推荐
- Redis 集群_主从复制_哨兵模型
1 redis集群简介 1.1 集群的概念 所谓的集群,就是通过添加服务器的数量,提供相同的服务,从而让服务器达到一个稳定.高效的状态. 1.1.1 使用redis集群的必要性 问题:我们已经部署好了 ...
- java中不常见的关键字：strictfp
1.strictfp, 即 strict float point (精确浮点). strictfp 关键字可应用于类.接口或方法.使用 strictfp 关键字声明一个方法时,该方法中所有的float ...
- Excel常见文本清洗函数
1.=LEFT(text,[num_chars]) 函数RIGHT具有相似功能 例如选出K列中,从左数前一个字符:= LEFT(k2,1) 2.=FIND(find_text,within_tex ...
- vm启动时通过U盘安装的方法
vm启动时通过U盘安装的方法 增加一个以U盘为硬盘的方法,通过boot中设置该硬盘启动后重新ghost或者安装win10X64位. 在虚拟机中增加一个硬盘,第二部设置为物理硬盘,选在对 ...
- Python之系统编程笔记
概念 命令行工具. Shell 脚本. 系统管理 系统模块 sys 提供一组功能映射Python运行时的操作系统 os 提供跨平台可移植的操作系统编程接口 os.path 提供文件及目 ...
- C# DateTime Subtract
DateTime start = DateTime.Now.AddDays(-20); DateTime end = DateTime.Now; TimeSpan ts = end.Subtract( ...
- poj 2915
#include <iostream> #include <algorithm> #include <cstdio> #include <cmath> ...
- （十四）Activitivi5之个人任务分配
一.个人任务分配 1.1 方式一:直接流程图配置中写死: 1.2 方式二:使用流程变量 我们在启动流程的时候设置流程变量即可 /** * 启动流程实例 */ @Test public void sta ...
- NodeJs 的Module.export 和 export
NodeJs 的Module.export 和 export 是一样的. 但是Module.export ={....} 可以起效,.export ={....} 是失效的. 这里的export ...
- Snort Inline IPS Mode
Snort Inline IPS Mode https://forum.netgate.com/topic/143812/snort-package-4-0-inline-ips-mode-intro ...