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. K8S从入门到放弃系列-(3)部署etcd集群

    摘要:etcd 是k8s集群最重要的组件,用来存储k8s的所有服务信息, etcd 挂了,集群就挂了,我们这里把etcd部署在master三台节点上做高可用,etcd集群采用raft算法选举Leade ...

  2. Oracle游标的简易用法

    create or replace procedure NW_DelYW(iOPERATION_ID number, sUserID varchar2) is sCurDJBH yw_operatio ...

  3. insert 一条数据 然后拿出这条数据在数据库中生成的ID

    [insert 一条数据 然后拿出这条数据在数据库中生成的ID] <insert id="insert" parameterType="management&quo ...

  4. pandas数据结构之基础运算笔记

    import pandas as pd import numpy as np s = pd.Series([1,3,5,6,8],index=list('acefh')) s.index # 读取行索 ...

  5. JVM 内存溢出详解（栈溢出，堆溢出，持久代溢出、无法创建本地线程）

    出处:  http://www.jianshu.com/p/cd705f88cf2a 1.内存溢出和内存泄漏的区别 内存溢出 (Out Of Memory):是指程序在申请内存时,没有足够的内存空间供 ...

  6. 奇妙的算法【9】YC每个小孩的糖果数，找公约数，最少硬币数

    1,每个小孩的糖果数量是多少 有p个小孩,c个糖果,刚开始第1个小孩发一个糖果,第2个小孩发两个糖果,第p个小孩发p个糖果,如果糖果没有发完,就接着[注意]第1个小孩发p+1个糖果.....第p个小孩 ...

  7. QTabWidget标签实现双击关闭（转）

    重载了QTabWidget(由于tabBar()是protected),这样就可以获取到标签了. 1 class Tab : public QTabWidget 2 { 3 Q_OBJECT 4 pu ...

  8. 常用的bug管理工具

    1. QC(Quality Center)是原Mercury Interactive公司(现已被HP收购)生产的企业级基于WEB測试管理工具,须要安装配置IIS和数据库.系统资源消耗比較 大:功能非常 ...

  9. Java 之 Map 接口

    一.Map 接口概述 java.util.Map 接口专门用来存放键值对这种对象关系的对象. 下面比较一下 Collection 与 Map 的区别: Collection 中的集合,元素是孤立存在的 ...

  10. K2 BPM_K2受邀出席QAD 2019年亚太区用户大会_全业务流程管理专家

    6月12-13日,K2受邀参加了以“云聚创新,智造未来”为主题的QAD 2019年亚太区用户大会.会议上K2同与会嘉宾们共商制造业数字化转型,就如何用流程赋能企业实现智能制造进行了精彩分享. 近期发布 ...