React-router-dom v6 not displaying web page [duplicate]

react-router-dom@6 does not display the pages. I have a layout (header+footer) as a wrapping component. All the other pages are routed inside this wrapper. This worked perfectly fine with react-router-dom@5 but the new v6 returns an empty page.

The layout file is as below.

import React, { Component } from 'react';
import Header from '../Appbar/App';
import Footer from '../Appbar/Footer';
import './Layout.css';

export default class Layout extends Component {
  constructor() {
    super();
    this.state = { 
    }
  }

  render() {
    return (
      <div className="page-container">
        <Header />
        <div className="content-wrap">
          {this.props.children}
        </div>
        <Footer />
      </div>
    );
  }
}

Routes file:

class RoutePages extends Component {
  render() {
    return (
      <div>
        <Layout>
          <BrowserRouter>
            <Routes>
              <Route path="/" render={props => <LandingPage {...props} />} element={LandingPage}/>
              <Route path="/blog" element={Blog}/>
              {/* <Route path="*" exact element={NotFound}/> */}
            </Routes>
          </BrowserRouter>
        </Layout>
      </div>
    );
  }
};

export default RoutePages;

index.js

const App = () => {
  return (
    <BrowserRouter>
      <RoutesPages />
    </BrowserRouter>
  )
}

ReactDOM.render(<App/>,document.getElementById('root'));

If I install react-router-dom@5, it works perfectly fine but I want to figure it out with v6. If I remove BrowserRouter from Routes.js, I get the header and footer but nothing inside. The children are not rendered.

How do I get this to work?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/RkNJDA2