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

Question

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

在 App.js 中，我将 props 传递给页面，我想在 NavBar 中将此 props 作为页面标题显示。我该怎么做？基本上每个 link 都有自己的道具，这是页面的名称，我想在 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 一样。
然后你可以从导航栏访问它。
管理全局状态，可以使用专门的库 (redux/etc..)，也可以简单地使用 React 的内置 contextAPI。

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

Answer 2

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

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

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

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

React.Js Passing props from component to NavBar component?

html

reactjs

react-router

react-props

react-hooks