[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 ...
随机推荐
- VMware的下载与安装
VMware的下载与安装 一.虚拟机的下载 1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Wi ...
- Golang mgo 模糊查询的使用
在日常使用的Mongodb中,有一项功能叫做模糊查询(使用正则匹配),例如: db.article.find({"title": {$regex: /a/, $options: & ...
- SAS学习笔记9 利用SAS绘制地图
绘制世界地图 proc gmap过程: map=指定绘图的map数据集 data=指定地图的对应数据集 id指定map数据集和对应数据集中都有的变量,一般为各区域的代码,作为两个数据集的连接变量 分色 ...
- python实现数字0开始的索引，对应Execl的字母方法
字母转数字方法: import re col = row = [] # 输入正确格式的定位,A2,AA2有效,AAB2无效 while len(col) == 0 or len(row) == 0 o ...
- [javascript]原生js实现Ajax
一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...
- 路由器开源系统openwrt配置页面定制
1. 新建虚拟机,百度文库有一篇<使用VMware安装OpenWrt>,地址:http://wenku.baidu.com/link?url=NkvaQpTf2dR8FpYn7JD9A7- ...
- 开启HSTS让浏览器强制跳转HTTPS访问
开启HSTS让浏览器强制跳转HTTPS访问 来源 https://www.cnblogs.com/luckcs/articles/6944535.html 在网站全站HTTPS后,如果用户手动敲入网站 ...
- gin框架初识(先跑一个简单demo) ①
Gin 是一个 go 写的 web 框架,具有高性能的优点.官方地址:https://github.com/gin-gonic/gin 先跑一个demo(先安装gin框架,具体见官方地址): 1.vs ...
- vue获取当前路由
完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.$route.params 例如:/user/:id → /user/ ...
- [Vuex系列] - Module的用法（终篇）
于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿.为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每 ...