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>.

[stephenhmarsh]

I followed the tutorial but the code in this project is 2 years old and doesn't seem to work with newer installations of react-router-dom.

Given the current App.js and "react-router-dom": "^6.3.0", I get this error:

[Error] 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>.
	performReactRefresh (bundle.js:46405)
	(anonymous function) (bundle.js:761)

[stephenhmarsh]

Downgrading to react-router-dom@5 prevents this error, for anyone following the tutorial in 2022.

[code-hyper]

Downgrading to react-router-dom@5 prevents this error, for anyone following the tutorial in 2022.

Nice one.

[codingChewie]

Downgrading to react-router-dom@5 prevents this error, for anyone following the tutorial in 2022.

Nice one.

There's no reason to downgrade. You can use React Router Dom version 6.4.1 with these changes:

<BrowserRouter>
    <Routes>
        <Route  path="/" exact element={<AllPosts />} />
        <Route path="/:slug" element={<OnePost />}  />
    </Routes>
</BrowserRouter>

Essentially you're swapping the <div> for <Routes> and the <Route> changes from:

<Route component={AllPosts} path="/" exact />

to:

<Route  path="/" exact element={<AllPosts />} />

and the second route of:

<Route component={OnePost} path="/:slug" />

changes to:

<Route path="/:slug" element={<OnePost />}  />