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>

顯然還有其他方法可以實現這種行為，它可能是重復的，但這是直接的方法。