React.Js 将道具从组件传递到 NavBar 组件？

Question

所以我有 React.JS 页面，这个页面由两部分组成。 NavBar 和页面内容。

在 App.js 中，我将道具传递给页面，我想在 NavBar 中显示此道具作为页面标题。 我该怎么做？基本上每个链接都有自己的道具，这是页面的名称，我想在 PageHeader 组件中显示这个道具。

import {BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Banany from "./Banany";
import Broskve from "./Broskve";
import PageHeader from "./Components/PageHeader";
import Home from "./Home";
import Hrusky from "./Hrusky";


function App() {
  return (
    <Router>
      <PageHeader/>

      <Switch>
        <Route exact path="/">
          <Home pageTitle="Home"/>
        </Route>
        <Route path="/banany">
          <Banany pageTitle="Bananas"/> <--- I want to display Bananas in PageHeader component
        </Route>
        <Route path="/broskve">
          <Broskve pageTitle="Broskve"/>
        </Route>
        <Route path="/hrusky">
          <Hrusky pageTitle="Pears"/>
        </Route>
      </Switch>

    </Router>
  );
}

export default App;

Answer 1

有各种各样的方法可以做到这一点。
想到的 2 个最相关的：

• 给每条路线一个参数，即pageTitle ，就像你传递给每一个 comp 一样。
  然后您可以从导航栏访问它。
• 管理全局 state，可以使用专门的库（redux/etc..），也可以简单地使用 React 的内置 contextAPI。

在这种情况下，我会使用第一种方法 go，因为如果这就是您所需要的，它会更简单。

Answer 2

如果页面 Header 取决于您的路线，只需将其移动到您的路线内，如下所示：

<Route path="/banany">
  <PageHeader pageTitle="Bananas" />
  <Banany pageTitle="Bananas" />
</Route>

显然还有其他方法可以实现这种行为，它可能是重复的，但这是直接的方法。