I have a modal which depended on a url.
<Route
path={`/preview/${params.id}`}
children={({match}) => {
return (
<ModalWindow
modalVisible={Boolean(match)}
onCloseWindow={onCloseWindow}
modalContent={modal}
/>
)
}}
/>
I am getting an error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
But I already wrapped all my app in a tag.
export default function AppRouter() {
return (
<Routes>
<Route
path={"/home"}
element={<HomeApp />}
/>
<Route
path={"/preview/:id"}
exact
element={<HomeApp />}
/>
<Route
path={"/fullInfo/:id"}
exact
element={<HomeApp />}
/>
<Route
path={"*"}
render={<Navigate to="/home"/>}
/>
</Routes>
)
}
P.s I am new in react-router-dom of the new version.
You have to wrap the rendered element in the element prop of your Route.So instead of :
<Route
path={"*"}
render={<Navigate to="/home"/>}
/>
Do this:
<Route
path={"*"}
element={<Navigate to="/home"/>}
/>
It is the same for the modal Route, you should wrap the component in the element prop of the Route