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

Question

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

<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>     

Answer 1

为您希望使用Navbar 和Footer 正常显示的组件创建一组Routes。执行如下操作:

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>
        )
    }
}

通过像这样分隔路由，Switch 组件将尝试在 DefaultRoutes 中找到与 url 匹配的 Route。如果是，那么它将使用 Navbar 和 Footer 呈现布局。

现在，让我们像这样创建一个 RedirectToNotFound 组件:

import React from "react";
import { Redirect } from "react-router-dom";

const RedirectToNotFound = () => {
  return <Redirect to="/notfound" />;
};

export default RedirectToNotFound;

现在，当用户转到未命名的路由时，它将导航到该组件，该组件将重定向到 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);

查看工作沙箱:https://codesandbox.io/s/cool-chaplygin-5to6g