React Router Displaying only Blank Page - No data Showing

Question

I am new to React. It's My First Program with React - Router When I Am Using React-Router I Don't get any data displaying on the window. It only Shows Blank Page.

My code - profile.js

import React from 'react'
 function Profile()
 { return ( <div>
   <h1>profile</h1> 
   </div> ) }

export default Profile

about.js file

import React from 'react'

function About() {
    return (
        <div>
            <h1>about</h1>
        </div>
    )
}

export default About

App.js

import About from './Container/about'
import Profile from './Container/profile'
import {BrowserRouter, Route} from 'react-router-dom'
function App() {
 return ( 
<div className="App"> 
<BrowserRouter> 
<Route element={About} path='/about' /> 
<Route element={Profile } path='/profile' /> 
</BrowserRouter> 
</div> 
); 
}

export default App;

If anybody Know any Solution Please Reply

I Checked some websites for results but I Don't get any solution from them. I watched some Youtube videos. but they code the same as mine and they got results but I didn't.

It will show the blank page because you have no route for "/". By going to "/about" and "/profile" you will be able to see your components — Asad Ashraf
– Asad Ashraf, Commented Mar 24, 2022 at 12:10
@AsadAshraf I am checking '/about' and '/profile' and it also have blank pages — sahal akma
– sahal akma, Commented Mar 24, 2022 at 13:27

Gagan Rihal · Accepted Answer · 2022-03-29 08:39:34Z

1

if you use older version import Switch from react-router-dom

import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route component={About} path="/about" />
          <Route component={Profile} path="/profile" />
       </Switch>
     </Router>
 </div>
);
}

export default App;

if you using latest version ..import Routes from react-router-dom App.js import Routes

    import About from './Container/about'
    import Profile from './Container/profile'
    import {BrowserRouter as Router,Routes, Route} from 'react-router-dom'
    function App() {
     return ( 
      <Router> 
        <div className="App"> 
         <Routes>
          <Route exact path='/about' element={<About />}  /> 
          <Route exact path='/profile' element={<Profile /> }  /> 
         </Routes>
        </div> 
      </Router> 
      ); 
      }
    
     export default App;

edited Mar 29, 2022 at 8:39

answered Mar 24, 2022 at 12:12

Gagan Rihal

2212 gold badges3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sahal akma Over a year ago

how to import "Routes route "?. there is nothing named 'Routes Route'. It shows error

Asad Ashraf Over a year ago

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

Gagan Rihal Over a year ago

There are two different Routes and Route... import {BrowserRouter, Routes, Route} from 'react-router-dom'

Maarten Bicknese Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

mc-user · Accepted Answer · 2022-03-24 14:29:50Z

0

You can use Switch from react-router-dom which renders the route exclusively.

Your code would be like this.

import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route component={About} path="/about" />
          <Route component={Profile} path="/profile" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Check this sandbox where react-router-dom is implemented with dynamic params as well as components.

answered Mar 24, 2022 at 14:29

mc-user

2,1114 gold badges17 silver badges30 bronze badges

3 Comments

sahal akma Over a year ago

It Shows 'Switch' is not exported from 'react-router-dom'

mc-user Over a year ago

I think you are using v6. I've used v5 in the testing code. Will share the updated sandbox in some time. You can check the official documentation. reactrouter.com/docs/en/v6/upgrading/v5

sahal akma Over a year ago

Thank You. I Am Using v6. Documentation helped me 👍

Collectives™ on Stack Overflow

React Router Displaying only Blank Page - No data Showing

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related