反应路由器不显示页面

Question

您好，我正在使用 react router dom 进行路由，但我现在遇到了问题，因为它不会只加载我的一个页面。其他页面正常工作，但我的关于页面显示空白页面。在我的本地主机中，每个页面都可以正常工作，但是当我将其部署到主机时，只有我的关于页面显示空白页面。有什么原因吗？

主路由：

import React, { Suspense, lazy } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';
import Loading from './components/Loading';

const Header = lazy(() => import('./components/Header'));
const Home = lazy(() => import('./components/Pages/Home'));
const ResearchPrograms = lazy(() => import('./components/Pages/ResearchPrograms'));
const ContactUs = lazy(() => import('./components/Pages/ContactUs'));
const GICR = lazy(() => import('./components/Pages/GICR'));
const About = lazy(() => import('./components/Pages/About'));
const Investors = lazy(() => import('./components/Pages/Investors'));
const Team = lazy(() => import('./components/Pages/Team'));
const Footer = lazy(() => import('./components/Footer'));
const NotFound = lazy(() => import('./components/Pages/Page404'));

const MainRouter = () => {
  return (
    <Router>
      <Suspense fallback={<Loading />}>
        <Header />
        <Switch>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route path="/home" component={Home} />
          <Route path="/researchPrograms" component={ResearchPrograms} />
          <Route path="/contactUs" component={ContactUs} />
          <Route path="/gicr" component={GICR} />
          <Route path="/about" component={About} />
          <Route path="/investors" component={Investors} />
          <Route path="/team" component={Team} />
          <Route component={NotFound} />
        </Switch>
        <Footer />
      </Suspense>
    </Router>
  );
}

export default MainRouter;

关于：

import React, { useEffect, useRef, } from 'react';
import { Link, } from 'react-router-dom';
import DropdownMenu from '../DropdownMenu';
import HandleStyle from '../HandleJumpStyleAbout';

const About = () => {
  const firstParag = useRef<HTMLDivElement>(null);
  const secondParag = useRef<HTMLDivElement>(null);
  useEffect(() => {
    document.addEventListener('scroll', () => {
      HandleStyle(firstParag, secondParag);
    }, true);
    return () => document.removeEventListener('scroll', () => {
      HandleStyle(firstParag, secondParag);
    }, true);
  }, []);
  return (
    <div style={{ marginBottom: 30 }}>
      <img className="about-image"
        src={require('../../AboutUs.jpg')}
        alt="main-wallpaper"
      />
      <div className="dropdownMenu-about">
        <DropdownMenu
          items={secondHeader}
          onPress={(index) => {
            switch (index) {
              case 0:
                handleJumpTo(firstParag, true);
                break;
              default:
                handleJumpTo(secondParag, true);
                break;
            }
          }}
        />
      </div>
    </div>
  );
}

export default About;

Answer 1

你需要在 Switch HOC 女巫exact prop 中添加路由

   <Switch>
          <Route exact path="/home" component={Home} />
          <Route exact path="/researchPrograms" component={ResearchPrograms} />
          <Route exact path="/contactUs" component={ContactUs} />
          <Route exact path="/gicr" component={GICR} />
          <Route exact path="/about" component={About} />
          <Route exact path="/investors" component={Investors} />
          <Route exact path="/team" component={Team} />
          <Route component={NotFound} />
    </Switch>