CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
freakrobot
freakrobot

Reputation: 33

React App goes blank after importing React-Router-Dom

Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:

App.js

//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import  'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={Home} />
        <Route path="/Pending" element={Pending} />  
      </Routes>
    </BrowserRouter>
  );
}

Home.js

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';

function Home(){
  return(
    <div>
      <div>
        <NavBar/>
      </div>
      <h1>HI</h1>
    </div>
  );
}

export default Home;

Upvotes: 2

Views: 454

Answers (3)

Drew Reese
Drew Reese

Reputation: 203322

Issue

The Route component API changed in react-router-dom@6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.

Solution

Render the routed components as JSX, i.e. <Home /> instead of Home.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Pending" element={<Pending />} /> 
      </Routes>
    </BrowserRouter>
  );
}

Upvotes: 4

Lucifer
Lucifer

Reputation: 500

import './App.css';

import {   BrowserRouter as Router ,  Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';

import Home from './Components/Home';
import About from './Components/About';


function App() {
  return (
    <>
    <Router>
      <Header/>
        <Routes>
            <Route path="/" element={ <Home/> } />
            <Route path="/About" element={ <About/> } />
        </Routes>
      <Footer/>
    </Router>
    </>
  );
}

export default App;

Upvotes: 0

Benji
Benji

Reputation: 430

You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.

In your App.js file, you have to make the following changes in order to work:

import { Routes, Route } from "react-router-dom";
import  'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
    
    export default function App() {
          return (
             <Routes>
               <Route index path="/" element={<Home />}/>
                  <Route path="pending" element={<Pending />} />  
             </Routes>
          );
    }

For more info, please visit the official documentation here!

Upvotes: 1

Related Questions