[Feature]: improve re-render performance with useNavigation via path comparison

[wdfinch]

What is the new or updated feature that you are suggesting?

One issue I'm facing in V6 is useNaviagate will rerender everything inside my <Routes/> component even when it's unnecessary. So for example, if I have the following:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Route>
  </Routes>
</BrowserRouter>

const Layout = () => {
  const navigate = useNavigate();

  return (
    <div>
        <div onClick={() => navigate("/invoices")}>Invoices</div>
        <div onClick={() => navigate("/expenses")}>Expenses</div>
      </nav>
      <Outlet />
    </div>
  );
};

Then clicking on one of the links inside the Layout function cause the Layout component to rerender. <Link/> doesn't have this problem. I've tried using memo and it doesn't not help.

Reproduction:

Click on the two routes and notice that the render count is incremented on each click.

https://codesandbox.io/s/gallant-wing-vtes6y?file=/src/App.tsx

Why should this feature be included?

One way this can be solved so to simply compare the new URL that navigate is called with and decide what to render based on the current and new url. So for example, if the URL "/invoices" is pushed and the current rendered route is "/expenses", and there is some shared layout react component between them, then this shared element does not need to be rendered.

[wdfinch]

I would also like to add that aside from a shared layout, navigating to a path that renders the same component with the same props should also not trigger a rerender.

[timdorr]

Duplicate of #7634