I'm new to JS react and I'm currently working on the routing portion of my project. I'm trying to utilize the BrowserRouter function imported from the react-router-dom package. But upon issuing npm start all I get is a blank white screen as seen in image (2). If I directly call my *LandingPage.js with the code I commented out on image (1) it outputs the screen shown in image (3) which is what I'm trying to output with the BrowserRouter method. Am I missing anything?

1.)

2.)

3.)

CodePudding user response：

If you have react-router-dom V6, then you have to use Routes and Route both at a time to make it work.

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

And update the App function.

function App() {
  return (
     
      <BrowserRouter>
       <Header />
       <main className="py-1">
        <Routes>
            <Route path="/" element={<LandingPage/>} />
        </Routes>
      
      </main>
    </BrowserRouter>
  );
}

export default App;

The Documentation has a pretty good example to understand that

Note: If you are using react-router-dom v5 or below then Import and use Switch instead of Routes for this purpose, Switch is been depreciated in v6.