[Bug]: Component causing incorrect re-renders #10283
Description
What version of React Router are you using?
6.9.0
Steps to Reproduce
let router = createBrowserRouter([
{
path: "/",
Component: Layout,
children: [
{
index: true,
Component: Index,
},
{
path: "a",
Component: A,
},
],
},
]);
export default function App() {
return <RouterProvider router={router} />;
}
function Layout() {
console.log("rendering Layout");
return (
<>
<Link to="/">Home</Link>
<Link to="a">A</Link>
<Outlet />
</>
);
}
function Index() {
console.log("rendering Index");
return <h1>Index</h1>;
}
function A() {
console.log("rendering A");
return <h1>A</h1>;
}Expected Behavior
Component shouldn't cause additional re-renders compared to element
Actual Behavior
Component causes additional re-renders because React.createElement is re-called each time