Even though the Link has "to" attribute set to the correct route, the same is not loading on clicking. Another route within react-router gets loaded in its place.
This is the code:
App.js
const [isLoggedIn, setIsLoggedIn] = React.useState(false);
// useEffect to stop infinite looping problem with state
React.useEffect(() => {
const loggedInInfo = localStorage.getItem("isLoggedIn");
if (loggedInInfo === "1") {
setIsLoggedIn(true);
}
}, []);
Inside return()
<Switch>
<Route path="/" exact>
<Redirect to="/login" />
</Route>
<Route path="/login">
{!isLoggedIn && <Login onFormSubmit={handleFormSubmit} />}
</Route>
<Route path="/home-page">
{isLoggedIn && <HomePage onLogout={handleLogout} />}
{!isLoggedIn && <Redirect to="/login" />}
</Route>
<Route path="/approved-factory-assy-test">
{isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />}
{!isLoggedIn && <Redirect to="/login" />}
</Route>
<Route path="*">
<h1>Page not found!</h1>
</Route>
</Switch>
Navbar.js
<div className="sub-menu">
<ul>
<li><Link className="link" to='/approved-factory-assy-test' target="_blank" rel="noreferrer noopener">Approved Factory Assy Test</Link></li>
I suspect when the app opens in the new window and browser context that the initial isLoggedIn state being false for the initial render is immediately bouncing the user off the "/approved-factory-assy-test" route. The issue is that the initial state matches the unauthenticated state, i.e. false.
const [isLoggedIn, setIsLoggedIn] = React.useState(false); // <-- initially false
...
<Route path="/approved-factory-assy-test">
{isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />}
{!isLoggedIn && <Redirect to="/login" />} // <-- bounce user to login
</Route>
Try to use more accurate initial state. Initialize the isLoggedIn state from localStorage, and use a useEffect hook to persist local state changes to localStorage.
Example:
const [isLoggedIn, setIsLoggedIn] = React.useState(() => {
return JSON.parse(localStorage.getItem("isLoggedIn")) ?? false;
});
React.useEffect(() => {
localStorage.setItem("isLoggedIn", JSON.stringify(isLoggedIn));
}, [isLoggedIn]);
Now renders correct component on initial render based on initial isLoggedIn state value.
<Route path="/approved-factory-assy-test">
{isLoggedIn
? <ApprovedFactoryAssyTest onLogout={handleLogout} />
: <Redirect to="/login" />
}
</Route>