nothing is visible in router react

Question

the following code is not showing any content on the web screen/page

import './App.css';
import Navbar from "./components/Navbar.jsx";
import Tef from './components/Tef';
import About from './components/About';
import Home from './components/Home';

import {useState} from 'react';
import { BrowserRouter as Router ,Routes as Switch , Route ,Link}from "react-router-dom";

function Main() {



    const [mode, setMode] = useState("Dark")
    const [NavbarIDUS , setNavbarID] = useState("Heading-Nav_D")
    const [divIDUS , setDivID] = useState("Nav-bg_D")
    const [PIDUS , setPID] = useState("title_D")
    const [CIDUS , setCID] = useState("contents_D")


    const lightTheme = () =>
        {
            setMode("Dark")
            setCID("contents_D")
            setDivID("Nav-bg_D")
            setNavbarID("heading-Nav_D")
            setPID("title_D")
            document.body.style.background = "#1E1E1E"
            document.body.style.color = "white"
        }
        const darkTheme = () =>
        {
            setMode("Light")
            setCID("contents")
            setDivID("Nav-bg")
            setNavbarID("heading-Nav")
            setPID("title")
            document.body.style.background = "#EEE"
            document.body.style.color = "black"
        }

    //mode handler
    const modeHandler = (event) =>
    {   
        if(mode === "Dark")
        {
            darkTheme();
        }

        else
        {
            lightTheme();
        }

    }

    //renderer
return(<>
<Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
</>    );


}
export default Main;

so WHAT can i do to make it work like it should

i was expecting to see some content on the screen but i give me a blank screen

i followed a website https://v5.reactrouter.com/web/guides/quick-start but it was not working for me so what should i do???

Answer 1

You said you are using version 6, but you have <switch> in your code. That is version 5 syntax. Here is a React Router V6 example.

<BrowserRouter>
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/About">About</Link>
      </li>
      <li>
        <Link to="/Users">Users</Link>
      </li>
    </ul>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/About" element={<About />} />
    <Route path="/Users" element={<Users />} />
  </Routes>
</BrowserRouter>

Edit: Hooks can only be called inside the body of a function component" occurs for multiple reasons If you are getting an invalid hook error then this is not related to the react router if you have followed the V6 examples correctly. There are a few things that can be causing that issue. Invalid Hook Call Warning

Change

import {useState} from 'react';

To import React, {useState} from 'react';