Hide/Unhide 在 React Router V4 中切换不同路由的导航链接

Question

我的应用程序中有一些路由，其中我有一个 header 和导航 links.

目前，我有一个要求，在几条路线中，我只想显示 header 而不是 nav link。

举个例子，假设 /billing 路线，我不想显示它的导航 links。

如何在不同路线之间切换 hide/unhide link？

function App() {
  return (
    <>
      <header>
        <Logo />
        <Search />
        <ActionButtons />
      </header>

      <BrowserRouter>
        <nav>
          <Link exact to="/">
            Home
          </Link>
          <Link exact to="/about">
            About
          </Link>
          <Link exact to="/contact">
            Contact us
          </Link>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/cafeteria">
            <Cafeteria />
          </Route>
          <Route path="/billing">
            <Billing />
          </Route>
        </Switch>
      </BrowserRouter>
    </>
  );
}

Answer 1

您可以将导航栏呈现到一条路线中，并指定您希望它匹配和呈现的所有路线。

示例：

function App() {
  return (
    <>
      <header>
        <Logo />
        <Search />
        <ActionButtons />
      </header>

      <BrowserRouter>
        <nav>
          <Route
            exact
            path={["/about", "/contact", "/cafeteria", "/"]}
          >
            <Link exact to="/">
              Home
            </Link>
            <Link exact to="/about">
              About
            </Link>
            <Link exact to="/contact">
              Contact us
            </Link>
          </Route>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/cafeteria">
            <Cafeteria />
          </Route>
          <Route path="/billing">
            <Billing />
          </Route>
        </Switch>
      </BrowserRouter>
    </>
  );
}

如果您有大量路由，那么使用要排除渲染的路由可能更实用。

示例：

function App() {
  return (
    <>
      <header>
        <Logo />
        <Search />
        <ActionButtons />
      </header>

      <BrowserRouter>
        <nav>
          <Route
            render={({ location }) => {
              return ["/billing"].some(path => location.pathname === path)
                ? null
                : (
                  <>
                    <Link exact to="/">
                      Home
                    </Link>
                    <Link exact to="/about">
                      About
                    </Link>
                    <Link exact to="/contact">
                      Contact us
                    </Link>
                  </>
                );
            }}
          />
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/cafeteria">
            <Cafeteria />
          </Route>
          <Route path="/billing">
            <Billing />
          </Route>
        </Switch>
      </BrowserRouter>
    </>
  );
}

Hide/Unhide 在 React Router V4 中切换不同路由的导航链接

Hide/Unhide toggle of nav links across different Routes in React Router V4

reactjs

react-router

react-router-dom