输出屏幕显示全白，没有任何输出

Question

我想得到这段代码的输出。

当我尝试运行这段代码时，这只显示一个白色屏幕，不知道为什么

m 把代码放在这里

// first page  find the code easliy App main page this is. 

import React {} from react;
import About from './component/About';
import Navbar from './component/Navbar';
import TextFrom from './component/TextFrom';
import {
  BrowserRouter,
   Router,
   Route,
   Routes,
} from "react-router-dom";

function App() {
  const [mode, setMode] = useState('light');//wheather dark mode is enabled or not
  const [alert, setAlert] = useState({
    msg: "",
    type: ""
  });
  // we define a setalert methode for pass the value//
  const showAlert = (message, type) => { 
    setAlert({
      msg: message,
      type: type
    }) //here Alert is a object
    setTimeout(() => {
      setAlert(null);
    }, 1500);

  }
  const toggleMode = () => {
    if (mode === 'light') {
      setMode('dark')
      document.body.style.backgroundColor = '#14142c';
      showAlert("Dark modeis enabled", "success");
      document.title = 'TextUtils-Dark Mode';
      // setInterval(()=>{
      //   document.title="TextUtils is Good"
      // },3000);
      // setInterval(()=>{
      //   document.title="Done By Ali"
      // },1000);
    }
    else {
      setMode('light')
      document.body.style.backgroundColor = 'white';
      showAlert("light mode  is enabled", "success");
      document.title = 'TextUtils-Light Mode';
    }
  }

  return (
    <>
    <BrowserRouter>
    <Router> 
      <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
      <Alert alert={alert} />
      <div className="container my-3">
      <Routes>
        <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <TextFrom showAlert={showAlert} heading="enter the text value" mode={mode} />
          </Route>
        </Routes>
      </div>
      </Router>
      </BrowserRouter> 
    </>
  );
}


export default App;

//Page seond also m puthing here//
this show only error in this page
import React from 'react'
import { PropTypes } from "prop-types";


export default function Navbar(props) {

  return (

<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
  <div className="container-fluid text-white">
    <a className="navbar-brand" href="/"  >{props.title}</a>
    <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 " >
          <a className="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li className="nav-item " >
          <a className="nav-link active" aria-current="page" href="/">About</a>
         </li>
        <li className="nav-item">
          <a className="nav-link" href="/">{props.aboutText} </a>
        </li>
       </ul>
      <form className="d-flex">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>
      <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
      <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"onClick={props.toggleMode}/>
      <label className="form-check-label" htmlFor="flexSwitchCheckDefault" >Enable the Dark Mode</label>
    </div>
    </div>
  </div>
</nav>
  )
}

Navbar.propTypes = { title:PropTypes.string.isRequired,
                    aboutText:PropTypes.string.isRequired  
                    
                  }
Navbar.dafaultProps ={
                  title:'Set title  here',
                  aboutText:'about text here '
}

请检查给定的代码不知道为什么当我在 visual studio 中运行此网站代码然后成功运行并在控制台中显示一条消息时它不起作用。窗口，但是当我打开浏览器时，浏览器窗口上什么也没有显示。

Answer 1

你错误地使用了 react-router。再看看文档 https://reactrouter.com/en/main/start/tutorial

我已经提供了一个使用您的代码的工作示例，并对不正确的地方进行了一些评论。看这里。

https://codesandbox.io/s/zealous-sun-q4ctsh?file=/src/App.js