本地主机显示空白页，在反应引导路由中没有任何错误，并且不链接到不同的页面

Question

我使用 create-react-app 创建了我的应用程序，并尝试在其上使用react-router。但它根本不起作用。 这是我的App.js

import "bootstrap/dist/css/bootstrap.min.css";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import "./App.css";
import { Route,Routes} from "react-router-dom";
import AppHeader from "./components/header";
import About from "./components/About";
import AppSlide from "./components/slide";
import Projects from "./components/projects";
import Contact from "./components/pages/Contact";
import Home from "./components/pages/Home";
import Appfooter from "./components/footer";

`function App() {
      
  return (
    `<div className="App">
     
      <header id="header">
        <AppHeader />`
      </header>
      <Routes>
         <Route path="/home" element={<Home/>}/>
         <Route path="/projects" element={<Projects/>}/>
         <Route path="/about" element={<About/>}/>
         <Route path="/contact" element={<Contact/>}/>
        </Routes>
      <main>
        <AppSlide />
        <about />
        <projects/>

        <Contact />
      </main>
      <footer id="footer">
        <Appfooter />
      </footer>
    </div>
  );
 
}
export default App;

**Index.js file**
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

**navigation bar code**
import React from "react";

import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

import logo from "../components/images/real.png";

export default function AppHeader() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
  
      <Container>
      
      <Navbar expanded="lg" className="phone-info " id="phone"><span>[phone] |[phone] | [phone]</span></Navbar>
      
      <Navbar.Brand href="/" id="logos"><img src={logo} className="logo" alt="VEHUSA" width={300} height={0}/></Navbar.Brand>
      
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
      <div className="fusion">
      <div className="fusion-wrapper">
      <a className="facebook"  href="https://www.facebook.com/VHSacco" target="_blank" rel="noreferrer"><i className="fab fa-facebook-f"></i></a>
      <a className="twitter" href="https://twitter.com/i/flow/login?redirect_after_login=%2FVeronaHSacco"  target="_blank" rel="noreferrer"><i className="fab fa-twitter"></i></a>
      
      <a className="linkedin"  href="https://www.linkedin.com/in/VHS/" target="_blank" rel="noreferrer"><i className="fab fa-linkedin-in"></i></a>
      <a className="mail"  href="mailto:[email protected]  " target="_blank" rel="noreferrer"><i className="fa fa-envelope" ></i></a>
     </div>
     </div>
      
          <Nav activeKey="/home">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <Nav.Link class="nav-link" id="navlink" href="/">
                  Home<span class="sr-only">(current)</span>
                </Nav.Link>
              </li>

              <li class="nav-item">
                <NavDropdown title="About Us" id="basic-nav-dropdown">
                  <NavDropdown.Item href="#about">Who are we</NavDropdown.Item>
                  <NavDropdown.Item href="#fusion">Board of directors</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Management Team</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Affiliates and Partners</NavDropdown.Item>
                </NavDropdown>
              </li>
              <li class="nav-item">
                <NavDropdown title="What we do" id="basic-nav-dropdown">
                  <NavDropdown.Item href="#action/3.2">
                    Products and services
                  </NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">
                    Our Bussiness
                  </NavDropdown.Item>
                </NavDropdown>
              </li>

              <NavDropdown title="Projects" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.2">
                  Ongoing projects
                </NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">
                  Past projects
                </NavDropdown.Item>
              </NavDropdown>
              <Nav.Link href="/contact.js">Contact</Nav.Link>
            </ul>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}



**Contact page**
import React from "react";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Button from 'react-bootstrap/Button';

export default function Contact() {
  return (
    <section id="contact" className="block contact-block">
      <Container fluid>
        <div className="title-holder">
          <h2>Contact us</h2>
          <div className="subtitle">We would love to Hear From you</div>
        </div>
        <Form className="contact-form">
          <Row>
            <Col sm={4}>
              <Form.Control type='text' placeholder="Enter your full name" required/>
            </Col>
            <Col sm={4}>
              <Form.Control type='email' placeholder="Enter your email address" required/>
            </Col>
            <Col sm={4}>
              <Form.Control type='tel' placeholder="Enter your phone number" required/>
            </Col>
          </Row>
          <Row>
            <Col sm={12}>
            <Form.Control as='textarea' placeholder="Enter your message" required /> 
            </Col>
          </Row>
          <div className='btn-holder'>
            <Button type="submit">Submit</Button>
          </div>
        </Form>
      </Container>
    </section>
  );
}

**About page**
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from 'react-bootstrap/Image';


import img1 from "../assets/images/mans.webp";


export default function About() {
  return (
    <section id="about" className="block about-block">
      <Container fluid>
        <div className="title-holder">
          <h2 className="now">About Us</h2>
          <div className="subtitle">learn more about us</div>
        </div>
        <Row>
          <Col sm={6}>
            <Image variant="top" src={img1} />
          </Col>
          <Col sm={6}>
            <p><br/>
            Vehusa Housing Company Ltd is a fully owned subsidiary of Verona Huruma Sacco Society Limited (hereinafter VHS Sacco). Vehusa was established to enable Sacco members to acquire affordable housing solutions by pooling resources and benefiting economies of scale.
           </p>
            <p>Its main objective is to improve the living standard of people living and working in the Kariobangi Parish and its environs through pooling resources.
            It has tremendously grown to a Sacco with a membership of over 20,000 from all walks of life and enlarged its wings beyond Nairobi.
            </p>
             
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
              alias ex error distinctio laudantium recusandae, iure. Vel nisi
              soluta, minus consectetur reiciendis laborum, laudantium
              perspiciatis quos molestias quam eum.
            </p>
            
          </Col>
        </Row>
      </Container>
    </section>
  );
}

它应该显示不同的页面，包括联系页面、关于页面、主页和项目（这是主页）。

我哪里可能错了？

Answer 1

导航到

index.js

并使用

包裹整个应用程序路由器

import { BrowserRouter } from "react-router-dom";

  <BrowserRouter>
      <App />
    </BrowserRouter>