Different route rendering on target="_blank" for react router Link tag

user_15395433 0
Viewed 51

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>
react-router reactjs javascript
1 Answers

Issue

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>

Solution

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>
user_86908570
Related