為什么我的屏幕沒有顯示 output 即使沒有錯誤

Question

塊引用

我有使用路線和路線。 我沒有任何錯誤，但屏幕上沒有 output 這是什么原因？ 請告訴我

我正在嘗試做單頁應用程序。 我正在構建文本分析器應用程序。 最初當我使用開關時它沒有工作（它顯示錯誤說在 react-router-dom 中找不到開關，后來我通過用路由替換開關來修復它。現在一切都是正確的並且它沒有顯示任何錯誤但是沒有顯示在 output 屏幕上。

這是我的應用組件

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;

這是我的導航欄組件

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;

使用此代碼段。

也許您已經從 app.js 文件中刪除了“function App() {”。 當我添加它時它對我有用。 如果您遇到任何其他問題，請告訴我。