Routing returns white page in React.js

April 2, 2022

I’m trying to set up routing but for some reason, it returns a blank page and renders nothing.

I’m using router version 6.3.0

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';

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

// --------------------------------------------- //

// App.js

import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Header />
            <Route path="/landing">
                <Landing />
            </Route>
        <Footer />
      </Fragment>
    );
  }
}

export default App;


// --------------------------------------------- //

// Landing.js

import Body from './Body'

function Landing(props) {
    return (
        <Body>
            <div className="Landing">
              Landing Context
            </div>
        </Body>
    )
}

export default Landing;

So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.