javascript - React Router: How to fix BrowserRouter showing the blank screen - Stack Overflow

admin管理员组

文章数量:1291629

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 mented 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.)

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 mented 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.)

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Feb 23, 2022 at 12:17 Faisal Nazik 2,89355 gold badges2323 silver badges4343 bronze badges asked Jan 31, 2022 at 11:57 Nionel IbarraNionel Ibarra 5311 gold badge11 silver badge66 bronze badges 2

• what version are you using of react-router-dom? – olscode Commented Jan 31, 2022 at 12:00
• Please edit the question to have the code instead of images. It would be so much easier to work it around. – Faisal Nazik Commented Jan 31, 2022 at 12:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptReact Router How to fix BrowserRouter showing the blank screenStack Overflow