react router dom display nothing blank page showing up

Question

If I remove the react router DOM, I can see the header component output. But if I add the router, I can't see anything, the page is blank, even no errors or warnings. I tried every possible way, but it didn't work. How to solve this?

My code parts:

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";

<Header />
    
{/* <section className='mt-24 p-8 w-full'> */}
<Router>
    <Routes>
        <Route path="/" element={<MainContainer />} />
        <Route path="/createItem" element={<CreateItems/> } />
    </Routes>
</Router>

{/* </section> */}
</main>

Answer 1

Try wrapping all your <Route /> components inside of a <Switch></Switch> instead of <Routes></Routes>. That should resolve the problem.

Also, I think you are using an older version of the react router so you can try upgrading to v6 as well and you will not need to wrap your routes in a <Switch></Switch> component either. https://reactrouter.com/docs/en/v6/upgrading/v5

Do let me know if this helped!