Question

所以我只有一个路由/reminder，我不希望我的Navigation组件出现，但是我想让Navigation组件在其他所有Route上呈现，我不确定该怎么办？

这是我在App.js上使用react-router-dom进行路由的位置。

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navigation from "./components/navigation/Navigation";
import Reminder from "./components/reminder/Reminder ";

const App = () => {

  return (
    <>
      <Switch>
        <Route path="/reminder" component={Reminder} exact />
      </Switch>
      <Navigation />
      <MainContent>
        <Router>
          <Route path={"/"} component={Dashboard} exact />
        </Router>
      </MainContent>
    </>
  );
}

我环顾了类似的问题，但主要是针对经过身份验证的页面，而不是针对经过身份验证的页面。

我不想沿着必须在我的21条当前路线中添加Navigation组件的路线，看来应该有更好的方法吗？

使用上面的当前代码，它呈现了Reminder组件，但仍然呈现了Navigation组件。

Answer 1

您可以使用custom hook from react-router访问比赛数据。您所需要做的就是

import { useRouteMatch } from "react-router-dom";

function App() {
  let match = useRouteMatch("/reminder");

  // Do whatever you want with the match...
  return (
<>
  <Switch>
    <Route path="/reminder" component={Reminder} exact />
  </Switch>
  {!match && <Navigation />} <---Conditional rendering
  <MainContent>
    <Router>
      <Route path={"/"} component={Dashboard} exact />
    </Router>
  </MainContent>
</>
  );
    }

此外，尽管我在您的示例中没有更改此设置，但通常在路由器组件之外设置路由并不是一个好主意。实际上，我有点惊讶react-router-dom没有为您抛出错误。

禁止在单个路线上渲染导航组件，而在其他所有路线上渲染

1 个答案: