CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Yagneshwar D
Yagneshwar D

Reputation: 33

Nothing is being displayed on the webpage using react-router-dom

Its just basic react-app I'm trying to build. I am unable to see anything on Home and About page. The code is compiled and no errors are found. Here goes the code:

App.js

import './App.css';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Home from './Home.js'
import About from './About'

function App() {
return (
<Router>
<div className="App">
Hi
<div className='content'>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/about" element={<About/>} />
</Routes>
</div>
</div>
</Router>
 );
}
export default App;

Home.js

import './App.js';
const Home = () => {
 return (
  <div className='Home'>Home page!</div>
);
}
export default Home;

About.js

const About = () => {
return (
<div className="About">
<h2>Add about page</h2>
</div>
);
}
export default About;

This is the image of the package.json - https://i.sstatic.net/ChcjX.png

Upvotes: 3

Views: 98

Answers (2)

Drew Reese
Drew Reese

Reputation: 203532

The project is missing react-router-dom as a dependency.

enter image description here

Run npm i -s react-router-dom@6 to install the latest v6 version and update the package.json file.

Then restart the app: npm start.

Upvotes: 1

Aneeq Khurram
Aneeq Khurram

Reputation: 94

You are not importing React in your files from react package, better to import it. And remove App.js import from Home.js file.

App.js

import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home.js';
import About from './About';
import React from 'react';

function App() {
  return (
    <Router>
      <div className="App">
        Hi
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}
export default App;

Home.js

import React from 'react';
const Home = () => {
  return <div className="Home">Home page!</div>;
};
export default Home;

About.js

import React from 'react';
const About = () => {
  return (
    <div className="About">
      <h2>Add about page</h2>
    </div>
  );
};
export default About;

Upvotes: 0

Related Questions