I know this question has been asked plenty of times. But sadly after implementing all of the possible solutions I still get a blank browser page after using Route, Routes.

My Code:

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header'
import Footer from './components/Footer'

import HomeScreen from './screens/HomeScreen'

function App() {
  return (
    <Router>
      <Routes>
        <Header />
          <main className="py-5">
          <Container>
            <Route path='/' component={<HomeScreen/>} />
          </Container>
          </main>
        <Footer/>
      </Routes>
    </Router>
  );
}

export default App;

Thank You for for help!

CodePudding user response：

I think you shouldn't nest elements other than <Route> inside <Routes> component. When location changes, <Routes> looks on all of his <Route> children and choose the one that fits. You nested your <Route> element inside <Header> so probably that's the problem. Try to rearrange the structure and move Routes to the top level.

CodePudding user response：

Issues

• In react-router-dom@6 the Route components can only be rendered directly by the Routes component or another Route component in the case of route nesting.
• The Route component API also changed significantly. There are no longer any component or render and children function props. They are replaced by a single element prop taking a React.ReactNode, a.k.a. JSX.

Solution

Move the Routes component down the tree to directly wrap the Route component(s), and switch to using the element prop to pass the routed content.

function App() {
  return (
    <Router>
      <Header />
      <main className="py-5">
        <Container>
          <Routes>
            <Route path='/' element={<HomeScreen />} />
          </Routes>
        </Container>
      </main>
      <Footer/>
    </Router>
  );
}