Getting blank page on using Route

guys!

I'm having some kind of trouble when adding a simple /home route to my app. When i add the line below to my App.js, the app turns blank (even the NavBar vanishes):

        <Route path='/home' exact component={HomeScreen} />

No compiling or server errors.

Can u give me a light?

App.js

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Route } from 'react-router-dom'

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

export default App;

HomeScreen.js

import React from 'react';

function HomeScreen() {
  return (
      <div>
        <h1>asdasdHome Screen</h1>
      </div>
  )
}

export default HomeScreen

Tree

tree

CodePudding user response：

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
mport { BrowserRouter, Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<HomeScreen/>} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

The bit that wasnt working was where you defined your element so change

 <Route path='/home' exact component={HomeScreen} />

to this

 <Route path='/home' element={<HomeScreen/>} />

CodePudding user response：

Hey Diego now there is react router v6

Where Switch is replaced for Routes and component={HomeScreen} for element={<HomeScreen/>}

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<HomeScreen/>} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;