CODEWITHSUNDEEP
node.jsreactjsreact-routerreact-router-dom
Chad_Manoj
Chad_Manoj

Reputation: 71

Reactjs=> React App rendering blank page error

My code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<div><App/><h1> Hello </h1></div>,document.getElementById('root'));

my App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
       <div className="container">
       <Navbar />
       <br/>
       <Route path="/" exact component={ExercisesList} />
       <Route path="/edit/:id" component={EditExercise} />
       <Route path="/create" component={CreateExercise} />
       <Route path="/user" component={CreateUser} />
       </div>
     </Router>
  );
}

export default App;

It renders a blank white page but shows no error! App js contains a Nav Bar and other links I also use react router dom could something be wrong with that??

Upvotes: 1

Views: 1272

Answers (1)

Drew Reese
Drew Reese

Reputation: 203322

The component APIs changed significantly from react-router-dom@5 to react-router-dom@6. The Route components must be rendered within a Routes component, and the component prop was replaced by a single element prop that takes a ReactNode i.e. JSX.

import { BrowserRouter as Router, routes, Route} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Routes>
          <Route path="/" element={<ExercisesList />} />
          <Route path="/edit/:id" element={<EditExercise />} />
          <Route path="/create" element={<CreateExercise />} />
          <Route path="/user" element={<CreateUser />} />
        </Routes>
      </div>
    </Router>
  );
}

For more detail regarding all the changes between versions see the v5-v6 migration guide.

Upvotes: 2

Related Questions