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. Paypal、Stripe、Braintree，跨境电商金流第三方支付该用哪家？

    在台湾做跨境电子商务生意,电商网站的金流肯定是一个最大的麻烦,Paypal或是Stripe和Braintree则是国际上大家最常用的金流整合第三方支付服务商.这些金流服务大幅简化网站付费过程,都让消费 ...

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

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

  3. Word 查找替换高级玩法系列之 -- 把论文中的缩写词快速变成目录下边的注释表

    1. 前言 问题:Word写论文如何把文中的缩写快速转换成注释表? 原来样子: 想要的样子: 2. 步骤 使用查找替换高级用法,替换缩写顺序 选中所有文字 打开查找替换对话框,输入以下表达式: 替换后 ...

  4. linux破解navicat for mysql

    第一次执行start_navicat时,会在用户主目录下生成一个名为.navicat64的隐藏文件夹. cd ~/.navicat64 此文件夹下有一个system.reg文件 rm system.r ...

  5. Django中常用的那些模块路径

    Django中常用的那些模块路径 from django.shortcuts import HttpResponse, render, redirect from django import temp ...

  6. spring cloud微服务实践七

    在spring cloud 2.x以后,由于zuul一直停滞在1.x版本,所以spring官方就自己开发了一个项目 Spring Cloud Gateway.作为spring cloud微服务的网关组 ...

  7. Mysql 集群环境搭建

    在上一篇文章中已经详细的写了关于Mysql的安装步骤.这一篇文章在上一篇文章的基础之上接着写集群的安装与部署. 安装地址:https://www.cnblogs.com/ming-blogs/p/10 ...

  8. sql注入测试(4)--如何防止该类缺陷发生

    检查用户输入的合法性,确信输入的内容只包含合法的数据,数据检查应当在客户端和服务器端都执行之所以要执行服务器端验证,是为了弥补客户端验证机制脆弱的安全性.在客户端,攻击者完全有可能获得网页的源代码,修 ...

  9. Angularjs 省市区级联

    Json 地区文件:http://blog.csdn.net/youshi520000/article/details/70808580 angularjs angular.module('app') ...

  10. css：display：grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...