React Router v6 Stutter in transitions

Question

So i have made my routes as shown below;

function App() {
  return (
    <Router>
    <Routes>
      <Route element={<WithoutNav />}>
        <Route path="/Login" element={<Login />} />
        <Route path="/*" element={<ErrorPage />} />
      </Route>
      <Route element={<WithNav />}>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Price" element={<Price />} />
        <Route path="/Profile/:username" element={<Profile />} />
      </Route>
    </Routes>
    </Router>
  );
}

But when I go from one page to another, lets say by clicking on my main nav bar at the top, the page "stutters" and doesn't change the page smoothly. Does anyone have a solution to this? I've only found something on youtube called Framer Motion, but I'm very unfamiliar with it and afraid to use it.

Your question appears to be missing a [minimal, complete, and reproducible code example](https://stackoverflow.com/help/minimal-reproducible-example). I don't see any issue with the routing code snippet you've shared. What transitions are you referring to? — Drew Reese, Mar 13 '22 at 23:38
It's more like the loading of the page, it stutters, it's sort of hard for me to explain otherwise. — Sermad NaJar, Mar 14 '22 at 08:25
*What* is stuttering? The loading of the page? The app? The animation? Can you be more specific? Is this something you could narrow down to include a minimal, reproducible example of here in your question? Is is something you could also try creating a running codesandbox demo of? — Drew Reese, Mar 14 '22 at 08:29

React Router v6 Stutter in transitions

0 Answers0