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>
If you're using React Router v6, this setup should work, try to verify if your components MainContainer and CreateItems are valid and make sure that they are imported as well
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