Reactjs 如何在特定页面上不显示导航栏？

我正在尝试建立一个多页面的应用程序，我在设置路线方面遇到了困难。从代码中可以看到，有一个导航栏、一个页脚和一个switch语句。switch标记的最后一行是notfound页面，我希望在该页面上不显示任何导航栏或页脚。我找不到办法让它发生

<Router>
   <NavbarPage />
   <Switch>
      <Route exact path="/" component={MyComponent} />
      <Route path="/services/" component={ServiciiPage} />
      <Route path="/contact/" component={Contact} />
      <Route path="/portfolio" component={Portfolio} />
      <Route component={My404Component} />
   </Switch>
   <Footer />
</Router>     

---

为要使用

导航栏和
页脚正常显示的组件创建一组
路由。执行以下操作：

class App extends React.Component{
    render(){
        const DefaultRoutes = () => {
            return(
                <div>
                    <NavbarPage/>
                    <Switch>
                      <Route exact path="/" component={MyComponent} />
                      <Route path="/services/" component={ServiciiPage} />
                      <Route path="/contact/" component={Contact} />
                      <Route path="/portfolio" component={Portfolio} />         
                    </Switch>                                                                                                           
                    <Footer/>
                </div>
            )
        }

        return(
            <Router>
                <Switch>
                    <Route component={DefaultRoutes}/>
                </Switch>
            </Router>
        )
    }
}

现在，当用户转到一个未命名的路由时，它将导航到此组件，该组件将重定向到404组件

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import My404Component from "./My404Component";
import NavbarPage from "./NavbarPage";
import Footer from "./Footer";
import MyComponent from "./MyComponent";
import RedirectToNotFound from "./RedirectToNotFound";

import "./styles.css";

class App extends React.Component {
  render() {
    const DefaultRoutes = () => {
      return (
        <div>
          <NavbarPage />
          <Switch>
            <Route exact path="/" component={MyComponent} />
            <Route path="/services/" component={ServiciiPage} />
            <Route path="/contact/" component={Contact} />
            <Route path="/portfolio" component={Portfolio} />   
            <Route component={RedirectToNotFound} />
          </Switch>
          <Footer />
        </div>
      );
    };

    return (
      <BrowserRouter>
        <Switch>
          <Route component={My404Component} path="/notfound" />
          <Route component={DefaultRoutes} />
        </Switch>
      </BrowserRouter>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{Route，Switch，BrowserRouter}；
从“/My404Component”导入My404Component；
从“/NavbarPage”导入NavbarPage；
从“/Footer”导入页脚；
从“/MyComponent”导入MyComponent；
从“/RedirectToNotFound”导入RedirectToNotFound；
导入“/styles.css”；
类应用程序扩展了React.Component{
render（）{
const DefaultRoutes=（）=>{
返回(
);
};
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
Hi Cristian，刚才为您提供了下面的解决方案。让我知道这是否有效。嗨，我尝试了您的方法，但它不起作用，即使它在我脑海中是有意义的。当我访问应用程序的随机页面时，它会显示
导航栏和页脚，而不是
My404组件
@CristianCiacu awesome，刚刚找到了一个解决方法。请参阅以上：）
import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import My404Component from "./My404Component";
import NavbarPage from "./NavbarPage";
import Footer from "./Footer";
import MyComponent from "./MyComponent";
import RedirectToNotFound from "./RedirectToNotFound";

import "./styles.css";

class App extends React.Component {
  render() {
    const DefaultRoutes = () => {
      return (
        <div>
          <NavbarPage />
          <Switch>
            <Route exact path="/" component={MyComponent} />
            <Route path="/services/" component={ServiciiPage} />
            <Route path="/contact/" component={Contact} />
            <Route path="/portfolio" component={Portfolio} />   
            <Route component={RedirectToNotFound} />
          </Switch>
          <Footer />
        </div>
      );
    };

    return (
      <BrowserRouter>
        <Switch>
          <Route component={My404Component} path="/notfound" />
          <Route component={DefaultRoutes} />
        </Switch>
      </BrowserRouter>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);