I’m working on a React application and recently added new routes to my App.jsx file. However, after adding these routes, my application only shows a white screen. When I remove the new code, the landing page displays correctly again.

Here is the relevant excerpt from my App.jsx file:

import Landing from './landing';
import Login from './login';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';

const Main = () => {
  return (
    <Router>
      <Switch>
        <Route path="/landing" exact component={Landing} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
};

export default Main;

I’ve checked the following:

There are no errors in the browser console.
The Landing and Login components are correctly exported.
The paths in the routes match the paths I’m trying to navigate to.
react-router-dom is properly installed.
I’ve restarted the development server.
There are no typos or case sensitivity issues in the import statements.
Despite these checks, the white screen persists. What could be causing this issue, and how can I resolve it?

What I Expected:

I expected the application to navigate to the Landing component when accessing /landing and to the Login component when accessing /login.

What Actually Happened:

After adding the new routes, the application only shows a white screen. When I remove the new code, the landing page displays correctly again.