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>