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':

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(      
     
              {this.props.children}      
     
,      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 = (  
         
            
             
           
          
        
     );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") && (        
     
       {            this.props.history.push(this.props.location.pathname);          }}        >          
      
                   Login modal          
      
        
           )    );  }}

 

Using:

     Login