I currently have a functionality that pushes users to different pages with history.push. Is it possible if the user is in the current path and decides to click the same path to re-render the current page?
Example, from the code below. If a user is in /home/reportanissue/createissue, if they decided to click the same url path, the expected behavior is to re-render the page.
Thanks
handleMenuItemClick(event) {
switch (event.currentTarget.id) {
case "mainPage":
this.props.history.push("/home/reportanissue");
break;
case "myTasks":
this.props.history.push("/home/reportanissue/managemytasks");
break;
case "myQueues":
this.props.history.push("/home/reportanissue/myqueues");
break;
case "createNewIssue":
this.props.history.push("/home/reportanissue/createissue");
break;
case "submitException":
this.props.history.push("/home/reportanissue/submitnewexception");
break;
default:
return;
}
}
This behavior is easy to create by using location.pathname
to match the path and window.location.reload()
to refresh the page.
handleMenuItemClick(event) {
switch (event.currentTarget.id) {
case "mainPage": {
if (this.props.location.pathname === "/home/reportanissue") {
window.location.reload();
break;
}
this.props.history.push("/home/reportanissue");
break;
...
default:
return;
}
}
At this point, the only limitations here are design...
const PATH_LINKS = {
mainPage: "/home/reportanissue",
myTasks: "/home/reportanissue/managemytasks",
...
}
handleMenuItemClick(event) {
const { history, location } = this.props;
const key = event.currrent.target.id;
switch (key) {
case "mainPage": {
if (location.pathname === PATH_LINKS[key]) {
window.location.reload();
break;
}
history.push(PATH_LINKS[key]);
break;
case "myTasks": {
if (location.pathname === PATH_LINKS[key]) {
window.location.reload();
break;
}
history.push(PATH_LINKS[key]);
break;
default:
return;
}
}
const PATH_LINKS = {
mainPage: "/home/reportanissue",
myTasks: "/home/reportanissue/managemytasks",
...
}
handleMenuItemClick(event) {
const { history, location } = this.props;
const key = event.currrent.target.id;
switch (key) {
case "myPage":
case "myTasks": {
if (location.pathname === PATH_LINKS[key]) {
window.location.reload();
break;
}
history.push(PATH_LINKS[key]);
break;
default:
return;
}
}
switch/case
all together:const PATH_LINKS = {
mainPage: "/home/reportanissue",
myTasks: "/home/reportanissue/managemytasks",
...
}
handleMenuItemClick(event) {
const { history, location } = this.props;
const key = event.currrent.target.id;
if (location.pathname === PATH_LINKS[key]) {
return window.location.reload();
} else if (PATH_LINKS[key]) {
return history.push(PATH_LINKS[key]);
}
console.error("The following path does not exist :", key);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.