所以我有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;

顺晟科技：

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

• 给每条路由一个param，即，就像你给每一个comp传递一样。 然后您可以从NAVBAR访问它。
• 使用专用库（redux/等）或简单地使用React内置的contextapi.
管理全局状态

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

如果页眉依赖于您的路由，只需将其移动到您的路由中，如下所示:

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;

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