1

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

Diego
  • 15
  • 1
  • 4

3 Answers3

1
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/>} />
Matt
  • 791
  • 4
  • 13
  • got this: export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams) – Diego Jan 21 '22 at 17:41
  • @Diego In your package.json please confirm which version of react-router-dom you are using – Matt Jan 21 '22 at 17:45
  • on other post (https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom) they said it was replaced by "Routes". Using "Routes" gives me no more blank page, but doesn't render the home screen element. – Diego Jan 21 '22 at 17:46
  • "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", – Diego Jan 21 '22 at 17:47
  • 1
    @Diego Sorry just updated my answer for the new version of react-router-dom. Same as S.marx answer – Matt Jan 21 '22 at 17:49
0

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;
S.Marx
  • 977
  • 10
  • 14
0

I think u used Link in Navbar. And the navbar is outside the broweser router. This was my problem.

Srijan Manandhar
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 18 '22 at 21:03