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. mac 安装 navicat for mysql 破解版

    mac 安装 navicat for mysql 破解版,直接安装,亲测可用 首先打开mac控制台输入命令行:sudo spctl --master-disable 百度盘,提取码: vrtr 失效请 ...

  2. Python 【爬虫】

    爬虫的工作原理 首先,爬虫可以模拟浏览器去向服务器发出请求: 其次,等服务器响应后,爬虫程序还可以代替浏览器帮我们解析数据: 接着,爬虫可以根据我们设定的规则批量提取相关数据,而不需要我们去手动提取: ...

  3. C# Winform 设置窗口打开的特效

    https://www.cnblogs.com/mq0036/p/6421946.html using System.Runtime.InteropServices; public class Win ...

  4. vue 钩子函数的初接触

    vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...

  5. java 实现二分查找算法

    //二分查找算法的实现 public static int binarySearch(int[] arr,int search) { int low=0; int high=arr.length-1; ...

  6. FlowPortal BPM 明细表中新添加的行一直排在最后的问题

    明细表中的数据提交过之后再编辑时,添加的行不管在第几行添加都显示在最后一行的问题 Solution:明细表的数据库表中加字段OrderIndex,设为必填,系统会自动排序

  7. main函数前后

    void f1(void)__attribute__((constructor)); void f2(void)__attribute__((destructor)); void f1(void) { ...

  8. sql创建临时表并且插入数据

    if OBJECT_ID('tempdb..#temp') is not null drop table #temp select * into #temp from ( --select * fro ...

  9. SOAP与restful webservice

    SOAP 什么是SOAP,我想不用多说,google一把满眼都是.其实SOAP最早是针对RPC的一种解决方案,简单对象访问协议,很轻量,同时作为应用协议可以基于多种传输协议来传递消息(Http,SMT ...

  10. 【Day5】2.反爬策略之代理IP

    import urllib.request as ur proxy_address = ur.urlopen('http://api.ip.data5u.com/dynamic/get.html?or ...