1

When I return only <NavBar> in the App.jsx file, it prints me out what I want (Navigation bar on the left side with my icons menu) but when I use the Router/Switch modules, the web page is blank any ideas why it is not working ?

import { BrowserRouter, Route, Routes, Switch } from 'react-router-dom'
import NotFound from './Pages/Errors/NotFound';
import NavBar from './Components/NavBar';
import Dashboard from './Pages/Dashboard/Dashboard';
import User from './Pages/User/User';
import About from './Pages/About/About';


export default function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <Switch>
        <Routes>
          <Route exact path="/"  element={<Dashboard />} />
          <Route path = "/user"  element={<User />} />
          <Route path = "/about"  element={<About />} />
        </Routes>
      </Switch>
    </BrowserRouter>    
   
  );
}

Here is the About page :

import React from 'react'

export default function About () {
    return (
        <div>
            <h2 className="text-2xl">About</h2>
            <h1> How you can contact us?
            </h1>
        </div>
    )
}

And here the picture of what i get :enter image description here

The text is printed just under the NavBar and not newt to the NavBar right side.

Zokulko
  • 211
  • 4
  • 25
  • What version of `react-router-dom` is installed? From the project directory run `npm list `react-router-dom` and report back. The `Switch` component is from v4/5 and the `Routes` component is from v6. `Routes` is the spiritual successor to `Switch`. Based on the routes it seems you are using v6. Please confirm. – Drew Reese Apr 03 '22 at 20:53
  • yarn list reac-router-dom -> yarn list v1.22.17. I can see in my package.json what version is used : "react-dom": "^18.0.0", "react-router-dom": "^0.0.0-experimental-compat.6", – Zokulko Apr 03 '22 at 20:57
  • That doesn't seem to be any valid version you should have installed. Run the appropriate yarn command to uninstall `react-router-dom` and install the latest `react-router-dom@latest` version. – Drew Reese Apr 03 '22 at 20:59
  • You should put the ``s components directly inside the `` if you are using react-router 5 or the `` if react-router 6. You can't use both and together – thalesbruno Apr 03 '22 at 21:04

1 Answers1

1

From what I can tell it seems you are using react-router-dom@6 and for some reason included the v5 Switch component. The Switch component was spiritually replaced by the Routes component and isn't part of the v6 API and should be removed.

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import NotFound from './Pages/Errors/NotFound';
import NavBar from './Components/NavBar';
import Dashboard from './Pages/Dashboard/Dashboard';
import User from './Pages/User/User';
import About from './Pages/About/About';

export default function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/user" element={<User />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>  
  );
}
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • @Zokulko Is the "User" icon something you are clicking on in the `NavBar` component? Can you include that component so we can see how you are linking to your routes? – Drew Reese Apr 03 '22 at 21:12
  • Thanks I can see the NavBar but when I click on my icons menu, the text is printed down the NavBar just after the About icon that is on the foot page) following by my text... – Zokulko Apr 03 '22 at 21:14
  • @Zokulko I see where you are rendering the `About` component, but I don't understand what the issue is. – Drew Reese Apr 03 '22 at 21:46
  • In the picture, the About, Dashboard rendering are under the NavBar, and not next to the NavBar... – Zokulko Apr 03 '22 at 22:51
  • Alright thank for your help! – Zokulko Apr 03 '22 at 23:59
  • 1
    @Zokulko Oh, sorry, ran out of space in that last comment. I meant to also tell you to feel free to ping me here with a link to any new question you create and I'll take a look when I can. Cheers. – Drew Reese Apr 04 '22 at 00:55
  • I've added a new [issue1](https://stackoverflow.com/questions/72669743/react-filter-data-with-toggle-button) and [issue2](https://stackoverflow.com/questions/72657845/react-why-does-my-first-set-of-selected-rows-turn-into-gray-before-moving-away-a). Thanks for your help – Zokulko Jun 18 '22 at 13:47