ReactJS react-router-dom - 组件未显示

Question

我是新来的，但是 StackOverflow 内容的长期读者！

我是 React 新手，有一个关于 Multi-Pages App 的简单问题。

我确实开始为朋友开发网站，我从单页机开始，但最后我意识到我需要的不仅仅是一页。我安装了 react-router-dom 并尝试设置它，网站没有返回任何错误，但只有 SideBarMenu 组件出现！

/ 上没有显示 Home 的内容，/audio、/video、/images 上的其余内容相同...其中最奇怪的部分是，如果我将 URL 写成诸如 /asiomaos9j 之类的随机内容，它仍然会显示一个带有 SideBarMenu 的空白网站> 甚至没有崩溃...

有人知道为什么我在 Home 上的所有组件都没有显示吗？甚至在 /images 上，js 文件只包含一个 div，里面有一个 H1，而这个 H1 也没有显示...我不知道我做错了什么！

我确实导入如下：

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

那么这里是我的 App.js ：

export default function App() {
  return (
    <React.StrictMode>
      <Routes />
    </React.StrictMode>
  );
}

我的 Routes.js ：

export default function Routes() {
    return (
      <Router>
        <Switch>
            <Route exact path='/' component={Home}></Route>
            <Route exact path="/audio" component={AudioPlayerApp}></Route>
            <Route exact path="/video" component={VideoPlayerApp}></Route>
            <Route exact path="/images" component={ImagesApp}></Route>
        </Switch>
  


        <SideBarMenu pageWrapId={"page-wrap"} outerContainerId={"app"} />
        
      </Router>
    );
  }

最后作为例子，这里是我的 Home.js

function Home(){
    return(

        <React.Fragment>
            <Header />

            <Services />
            <ServicesContent />

            <Media />
            <MediaContent />

            <Studio />
            <StudioContent />

            <Partenaires />
            <PartenairesContent />

            <Contact />
            <ContactContent />

            <Footer />
        </React.Fragment>
    )
}

export default Home;

在这里，SideBarMenu.js ：

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './components_css/SideBarMenu.css';

export default props =>{
    return(
        <Menu {...props}>
            <a className="menu-item" href="#">
                <span>+</span>Accueil
            </a>
            <a className="menu-item" href="#services_link">
                <span>+</span>Services
            </a>
            <a className="menu-item" href="#media_link">
                <span>+</span>Médias
            </a>
            <a className="menu-item" href="#studio_link">
                <span>+</span>Studio
            </a>
            <a className="menu-item" href="#contact_link">
                <span>+</span>Contact
            </a>
        </Menu>
    );
};

这些是目前主页内的链接。

Answer 1

从主路线中取出确切的路线并将其放在所有其他路线的末尾