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的更多相关文章

  1. IDEA+MySQL实现登录注册的注册验证时出现 Cannot resolve query parameter '2'

    问题描述: 在IDEA+MySQL+Tomcat 实现登录注册JSP的注册信息INSERT验证时出现 Cannot resolve query parameter '2' 贴上创建链接的代码: if( ...

  2. DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)

    PowerBI  - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...

  3. 路由传值及获取参数,路由跳转，路由检测，this.$route.query和this.$route.params接收参数，HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  4. React报错之Parameter 'props' implicitly has an 'any' type

    正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...

  5. React报错之Parameter 'event' implicitly has an 'any' type

    正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决 ...

  6. react看这篇就够了（react+webpack+redux+reactRouter+sass）

    本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...

  7. this.$route和this.$router区别

    this.$route 和 this.$router 这两个对象有什么区别: this.$route 是当前路由跳转对象,包含当前路由的name.path.query.params等属性 this.$ ...

  8. 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 ...

  9. React与ES6（四）ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

随机推荐

  1. 笔记-10：处理时间的标准库-time库

    1.time库介绍 主要用来处理时间的标准库. time库提供了系统级精确计时器的计时功能,可以用来分析程序性能,也可让程序暂停运行时间. time库的功能主要分为:时间处理.时间格式化.计时. 2. ...

  2. shell习题第26题：监控mysql服务

    [题目要求] 假设mysql密码是123456. 写脚本监控mysql服务是否正常,比如是否可以执行show processlist,并检测一下当前的mysql服务是主还是从.如果是从,请判断他的主从 ...

  3. Destination高级特性

    一.组合队列 Composite Destinations 组合队列允许用一个虚拟的destination代表多个destinations.这样就可以通过composite destinations在 ...

  4. hdu 4333 扩展kmp+kmp重复字串去重

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4333 关于kmp next数组求最短重复字串问题请看:http://www.cnblogs.com/z ...

  5. 解析Illumina+PacBio组装策略

    解析Illumina+PacBio组装策略 (2016-12-08 13:21:58) 转载▼     基于Illumina和PacBio平台的“二加三”组装策略,巧妙的融合了PacBio平台超长读长 ...

  6. JavaBean 详细

    一.什么是JavaBean? JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方 ...

  7. Asp.Net Core 轻松学系列-3项目目录和文件作用介绍

    目录 前言 结语 前言     上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令.Asp.Net Core M ...

  8. luogu题解 P3950部落冲突--树链剖分

    题目链接 https://www.luogu.org/problemnew/show/P3950 分析 大佬都用LCT,我太弱只会树链剖分 一个很裸的维护边权树链剖分题.按照套路,对于一条边\(< ...

  9. buffers和cached

    buffers和cached是为了提高数据访问性能,减少对磁盘的I/O操作 buffers 用来给块设备做的缓冲大小 例如,目录内容,权限 cached 用来给文件做缓冲 例如,打开的文件 测试 先后 ...

  10. KVM之virsh管理虚拟机硬盘配置

    新建raw格式虚拟盘 [root@ubuntu ~]# qemu-img create -f raw /data/raw/disk02.raw 5G Formatting '/data/raw/dis ...