Bug: Page does not reload when URL link directly changed from broswer tab in first go. about react

[vimal20002]

I think you should use react-router-dom for routing you want to open something in new tab giving it dynamic url you can do like this

const uri = /#/issues/" + props.data.issueNumber;
<Link target={"_blank"} to={uri} > {"#issue"+props.data.issueNumber } </Link>
and add a route tag with dynamic tag

<Route exact path ="/issues/:id"><Issue/></Route>
and in Issue component you can do filter using id that you can get from useParams and display the data accordingly
I tried it will provide expected behavior as you want

[iamabhshk]

import { ICellRendererParams } from "ag-grid-community";
import { Link } from "react-router-dom";

export default function IssueDetailCellRenderer(props: ICellRendererParams) {
  return (
    <Link
      to={"/issues/" + props.data.issueNumber}
      target="_blank"
      rel="noopener noreferrer"
      style={{ textDecoration: "none" }}
    >
      {props.value}
    </Link>
  );
}

This might help

[ApoorvSeth]

const uri = /#/issues/" + props.data.issueNumber;

Query is not "How to open a new tab"

My Issue is after opening a new tab(loaded successfully), when I am trying to change URL of this tab directly and press Enter. Brower does not reload. Only if I click on URL tab again and press Enter again it reload.

[Swapnilchavan13]

import { ICellRendererParams } from "ag-grid-community";
import { useEffect } from "react";

export default function IssueDetailCellRenderer(props: ICellRendererParams) {
useEffect(() => {
function handleLinkClick(event) {
event.preventDefault();
const newTab = window.open("", "_blank");
if (newTab) {
newTab.location.href = "/#/issues/" + props.data.issueNumber;
}
}

const linkElement = document.getElementById(`issue-link-${props.rowIndex}`);
if (linkElement) {
  linkElement.addEventListener("click", handleLinkClick);
}

return () => {
  if (linkElement) {
    linkElement.removeEventListener("click", handleLinkClick);
  }
};

}, [props.data.issueNumber, props.rowIndex]);

return (
<a
sx={{ textDecoration: "none" }}
href="/#/issues/"
id={issue-link-${props.rowIndex}}
>
{props.value}

);
}

1. Page Reloading Issue: The current implementation using may cause page reloading problems when you directly change the URL in the new tab and press Enter. Using an anchor tag with JavaScript provides better cross-browser compatibility compared to the custom MUI component behavior.
2. URL Manipulation: Handling the link click event with JavaScript allows more flexibility in URL manipulation and additional pre-navigation actions. Utilizing the useEffect hook ensures proper attachment and detachment of the event listener, avoiding memory leaks or conflicts.
3. Control Over New Tab: window.open() and location.href offer more control over new tab behavior, like dimensions, location, and navigation to the desired URL.
4. Predictable Behavior: The proposed code ensures a predictable behavior for opening new tabs, addressing the issue of URLs not reloading correctly.
5. Scalability: By using standard anchor tags, the code can be easily maintained and scaled, reducing dependencies on specific UI libraries.