Why does in react-router v6 not work in like it does in the beta version?

Question

This is how I use it, and I don't think there should be much of a problem:

export const ListScreen = ()=>{
    return (
        <>
            <h1>ListScreen</h1>
            <Link to={"/kanban"}>kanban</Link>
            <Link to={"/epic"} >epic</Link>
            <Routes>
                <Route path={"kanban"} element={<KanbanScreen/>}/>
                <Route path={"epic"} element={<EpicScreen/>}/>
                <Navigate to={window.location.pathname + "/kanban"}/>
            </Routes>
        </>
    )
}

enter image description here

I am using react-router version 6.2.1

Does this answer your question? [Navigate is not a component. All component children of must be a or ](https://stackoverflow.com/questions/70171991/navigate-is-not-a-route-component-all-component-children-of-routes-must-be) — TheTisiboth, Dec 21 '21 at 14:19

TheTisiboth · Accepted Answer · 2021-12-21T14:17:48.007

You can find the anwser here: Routes component only accept Route component as child

So in your case, instead of using directly <Navigate /> in the Routes component, I'd rather do like this:

<Route path="*" element={<Navigate to={window.location.pathname + "/kanban"}/>}

But instead of redirecting, it would make more sense (to me) to have a default Route instead, that points directly to the default component to display, like this:

<Route path="*" element={<KanbanScreen/>}

Why does in react-router v6 not work in like it does in the beta version?

1 Answers1