React router not rendring the comoponents

June 5, 2022

I’m new to routing and facing issue. The components work find if I add them directly in app.js but since I use route it’s not rendering the components, again direct components render fine. For the code below it’s rendering the <Navbar /> and <Footer /> but not rendering the other components.

import React from "react";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Sad from "./components/Pages/Sad";
import World from "./components/Pages/World";
import Hero from "./components/Hero";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/" component={Hero} />
          <Route path="/sad" component={Sad} />
          <Route path="/about" component={World} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

>Solution :

On the latest react version you should change your code like this:

import React from "react";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Sad from "./components/Pages/Sad";
import World from "./components/Pages/World";
import Hero from "./components/Hero";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
     <div className="App">
       <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Hero />}/>
          <Route path="/sad" element={<Sad/>} />
          <Route path="/about" element={<World/>} />
        </Routes>
        <Footer />
      </Router>
     </div>
    
  );
}

export default App;

https://reactrouter.com/docs/en/v6/getting-started/overview