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. Python笔记day20-面向对象

    目录 面向对象 1 装饰器 1.1 装饰器是什么? 1.2 装饰器 2 面向对象 (Object Oriented) 简称OO 2.1 面向对象相关术语 2.2 类和对象 2.3 类和对象的实现和书写 ...

  2. Oracle数据库——用户（USER）

    前言   本文将介绍小白入门级别的关于用户的SQL语句.想全面了解的请参考其他资料.例如:Oracle官方文档--CREATE USER 文章目录 前言 创建用户 修改用户密码 授予用户权限 删除用户 ...

  3. JS 02 函数

    函数 一.创建函数 1.function 函数名( 形参列表 ){ 函数体 } 2.var 函数名 = function( 形参列表 ) { 函数体 } 3.var 函数名 = new Functio ...

  4. asp.net core-1.在控制台创建ASP.NET Core应用程序

    创建asp.net core应用程序,需要先把环境安装好,我这边选的是vs2017 第一步先执行dotnet 我执行dotnet --help可以把所有的命令全部列出来: 红框内就是我们可以用来初始化 ...

  5. CMake入门-01-从HelloWorld开始

    工作环境 系统:macOS Mojave 10.14.6 CMake: Version 3.15.0-rc4 从 Hello,World! 开始 (1) 新建 hello 目录,创建文件 CMakeL ...

  6. 箭头函数的arguments不可用

    ES5中的arguments function func(a,b,c){ console.log(arguments[0],arguments[1],arguments[2]) } func(1,2, ...

  7. （一）easyUI之第一个demo

    一.下载 官网下载 : http://www.jeasyui.net/download/   同时并下载官方中文API文档. 解压后的目录结构: 二.第一个demo 1      新建工程并导入包 2 ...

  8. （二十六）JavaBean

    一.定义 1 JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法暴露给其它程序 ...

  9. IDEA安装及默认配置习惯配置(二)

    安装完后,接下来配置Idea使用习惯. 一.基本使用 1.字体设置 2.修改编码模式 3.显示行号和方法分割线 4. 格式化代码时候多行空行合并为1行 5.代码提示不区分大小写 6.自动导包设置 7. ...

  10. css布局笔记

    1.display   block块级元素(div.p等) inline 行内元素(a.span等) 常见的例子:把li修改成inline ,制作成水平菜单 2.max-width 来适应不同浏览器窗 ...