1

I'm new to web developing. I'm having no output on localhost/home, when I try to execute the npm start command. I think it's on the App.js file, I just cant understand for now. Please help me fellow web dev Gods.

import logo from './logo.svg'
import './App.css';
import Navbar from './components/Navbar';
import React from 'react'
import {BrowserRouter, Route , Link, Routes} from 'react-router-dom';
import Homescreen from './screens/Homescreen';

function App() {
  return (
    <div className="App">
        <Navbar/>
          <BrowserRouter>
            <Routes>
              <Route path ="/home" exact component={Homescreen}></Route>
            </Routes>  
          </BrowserRouter>
    </div>
  );
}

export default App;

import React from 'react'

function Homescreen() {
  return (
    <div>
        <h1>Home screen</h1>
    </div>
  )
}

export default Homescreen

Output of localhost/home

Console on localhost/home

cirzed
  • 15
  • 4
  • It's not clear from your question but are you able to successfully run `npm start`? Do you see any errors reported in your browser's dev-tools console? – Phil Sep 05 '22 at 03:59
  • oh sorry, yes npm start command executes fine. i've updated the post, added the console, – cirzed Sep 05 '22 at 04:32
  • 1
    Navbar component have error, at Navbar component you have to use `className` instead of `class`. – Mohit Sharma Sep 05 '22 at 04:36
  • Looks like you might also have some [bad browser extensions](https://stackoverflow.com/q/54126343/283366) causing those first 3 errors – Phil Sep 05 '22 at 04:39

1 Answers1

-1

You have mistakenly added the space before path (path ="/home")

<Route path ="/home" exact component={Homescreen}></Route>
<Route path="/home" exact component={Homescreen}></Route>
Wahab Kazmi
  • 9
  • 1
  • 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](/help/how-to-answer). – Community Dec 27 '22 at 13:22