'React flick when switching between pages

So I went through a lot of these questions here on stackoverflow but I couldn't find solution for me / or I wasn't able to implement one for me. I hope you can help me.

The problem is with the flick/blink when I try to switch between pages I am using Routes in my App.js and Link in my Navbar. Here is the code:

const App = () => {
  return (
    <div className="app">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Home" element={<Home />} />
          <Route path="/Profile" element={<Profile />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

const ListItem = ({ isActive, onClick, icon, name }) => {
  const className = `list${isActive ? " active" : ""}`;

  return (
    <li onClick={onClick} className={className}>
      <Link to={`/${name}`}>
        <span className="icon">
          <ion-icon name={icon} />
        </span>
        <span className="text">
          {name} {isActive ? "" : ""}
        </span>
      </Link>
    </li>
  );
};

const Navbar = () => {
  const [activeElem, setActive] = useState("Home");

  const handleToggle = (newValue) => {
    setActive(newValue);
  };

  console.log("active>>", activeElem);

  return (
    <div className="navigation">
      <ul>
        <ListItem
          key="Home"
          isActive={activeElem === "Home"}
          onClick={() => handleToggle("Home")}
          icon="home-outline"
          name="Home"
        />
        <ListItem
          key="Profile"
          isActive={activeElem === "Profile"}
          onClick={() => handleToggle("Profile")}
          icon="person-outline"
          name="Profile"
        />
        <ListItem
          key="Messages"
          isActive={activeElem === "Messages"}
          onClick={() => handleToggle("Messages")}
          icon="chatbubble-outline"
          name="Messages"
        />
        <ListItem
          key="Photos"
          isActive={activeElem === "Photos"}
          onClick={() => handleToggle("Photos")}
          icon="camera-outline"
          name="Photos"
        />
        <ListItem
          key="Settings"
          isActive={activeElem === "Settings"}
          onClick={() => handleToggle("Settings")}
          icon="settings-outline"
          name="Settings"
        />
        <div className="indicator"></div>
      </ul>
    </div>
  );
};
export default Navbar;

reactjs react-router

Solution 1:^[1]

Try to use this package which helps you mitigate the blink https://www.npmjs.com/package/react-router-transition

Solution 2:^[2]

So following on from my comment, I think the real issue is with this wrapper right here:

https://github.com/dziekiczan1/dive/blob/master/src/wrapper/MotionWrap.js#L8

It looks like the opacity transition is being a little messy?

Usually whenever I've seen the flickering happen in react router, it's usually something unrelated to the router itself that's causing the refresh or poor transition behavior.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rmths01
Solution 2	Azarro

'React flick when switching between pages

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]