I am trying to upgrade to React Router v6 (react-router-dom 6.0.1
).
Here is my updated code:
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lab" element={<Lab />} />
<Route render={() => <Navigate to="/" />} />
</Routes>
</BrowserRouter>
The last Route
is redirecting the rest of paths to /
.
However, I got an error
TS2322: Type '{ render: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
However, based on the documentation, it does have render
for Route
. How can I use it correctly?
render
in favour ofchildren
? But it looks like that section you were reading talks about upgrading from v5 to v5.1, they only removedrender
in v6. Looks like<Route element={<Navigate to="/" />} />
is the new style.<Route render={() => ...}>
to<Route element={...}>
and you're done."<Route path="*" element={<Navigate to="/" />} />
, feel free to post as an answer!