[React] Create a Query Parameter Modal Route with React Router
2024-08-29 23:59:23
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>
最新文章
- 基于.net开发chrome核心浏览器【七】
- 模拟placeholder支持ie8以下处理了密码框只读的问题
- bodyParser注意“需要请求头的支持”
- 文件操作的openmode
- ajax post方法
- 使用Knoctout.分页
- hdu1281结题报告
- css中的相对定位与绝对定位
- F5负载均衡虚拟服务器配置FTP端口访问不了
- 通过cmd命令行连接mysql数据库
- springmvc的ModelMap,前台取值
- java web (sevlet)请求之get,post,forward,redirect
- spring/spirng boot添加fluent日志-aop
- 用例设计之API用例覆盖准则
- Linux vi中查找字符内容的方法
- Spring(十六):泛型依赖注入
- (转) 共享个很棒的vim配置
- 用js实现预览待上传的本地图片
- Ruby:对象模型(又称八卦模型)笔记
- Flutter 实现退出登录功能,应用退出到登录界面 | 返回应用首页