Why is my Screen not showing the output even though there are no errors

Question

Blockquote

I have uses route and routes. I am not having any errors but there is no output on the screen what is reason for that? Please let me know

I was trying to do single page application. I was building text analyzer app. Initially it did not worked when i used switch(it was showing error saying switch not found in react-router-dom, later I fixed it by replacing switch with routes. Now everything is correct and its not showing any error but there is no display on the output screen.

This is my app component

import "./App.css";
import Alert from "./components/Alert";
import Navbar from "./components/Navbar";
import Overview from "./components/Overview";
import Textform from "./components/Textform";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
return (
    <>
      <Router>
        <Navbar title="Text Analyzer" Homepage="Homepage"mode={mode}
          togglemode={togglemode}/>
        <Alert alert={alert} />
        <div className="container">
          <Routes>
            <Route exact path="/overview" element={<Overview />} />
            <Route exact path="/" element={
                <Textform heading="Enter the text to analyze" mode={mode}
                  showalert={showalert}/>}
            />
          </Routes>
        </div>
      </Router>
    </>
  );
}
export default App;

This is my navbar component

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

export default function Navbar(props) {
  return (
    <nav
      className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
    >
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">
          {props.title}
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link className="nav-link active" aria-current="page" to="/">
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link active"
                aria-current="page"
                to="/overview"
              >
                Overview
              </Link>
            </li>
          </ul>
          <div
            className={`form-check form-switch text-${
              props.mode === "light" ? "dark" : "light"
            }`}
          >
            <input
              className="form-check-input"
              type="checkbox"
              role="switch"
              id="flexSwitchCheckDefault"
              onClick={props.togglemode}
            />
            <label
              className="form-check-label"
              htmlfor="flexSwitchCheckDefault"
            >
              Enable Darkmode
            </label>
          </div>
          <div
            className={`form-check form-switch text-${
              props.mode === "light" ? "red" : "light"
            }`}
          >
            <input className="form-check-input" type="checkbox"           role="switch" id="flexSwitchCheckDefault" onClick={props.togglemode}
            />
            <label
              className="form-check-label"
              htmlfor="flexSwitchCheckDefault"
            >
              Enable Redmode
            </label>
          </div>
        </div>
      </div>
    </nav>
  );
}
Navbar.propType = {
  title: PropTypes.string.isRequired,
  Homepage: PropTypes.string.isRequired,
};
Navbar.defaultProps = {
  title: "set title here",
  Homepage: "about text here",
};

Answer 1

import "./App.css";
import Alert from "./components/Alert";
import Navbar from "./components/Navbar";
import Overview from "./components/Overview";
import Textform from "./components/Textform";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
function App() {
return (
    <>
      <Router>
        <Navbar title="Text Analyzer" Homepage="Homepage"mode={mode}
          togglemode={togglemode}/>
        <Alert alert={alert} />
        <div className="container">
          <Routes>
            <Route exact path="/overview" element={<Overview />} />
            <Route exact path="/" element={
                <Textform heading="Enter the text to analyze" mode={mode}
                  showalert={showalert}/>}
            />
          </Routes>
        </div>
      </Router>
    </>
  );
}
export default App;

Use this code snippet.

Maybe you have removed "function App() {"from the app.js file. Its works for me when I add this. Let me know if you face any other issues.