Блог

Главная - Вопросы по программированию - Реагировать.Js Передает реквизиты из компонента в компонент NavBar?

Реагировать.Js Передает реквизиты из компонента в компонент NavBar?

#html #reactjs #react-hooks #react-router #react-props

Вопрос:

Поэтому я должен отреагировать.Страница JS и эта страница состоят из двух частей. Панель навигации и содержимое страницы.

В App.js Я передаю реквизиты на страницу, и я хочу отобразить эти реквизиты на панели навигации в качестве заголовка страницы. Как я могу это сделать ?, в основном у каждой ссылки есть свой реквизит, который является названием страницы, и я хотел бы отобразить этот реквизит в компоненте 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;

Ответ №1:

Если заголовок страницы зависит от вашего маршрута, просто переместите его внутри вашего маршрута, например:

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

Очевидно, что есть и другие способы добиться такого поведения, и оно может быть повторяющимся, но это прямой подход.

Комментарии:

1. Это на самом деле хорошая идея, спасибо, я воспользуюсь вашим решением.

Ответ №2:

Существуют всевозможные методы для этого.
2 наиболее релевантных, которые приходят на ум:

  • Дайте каждому маршруту параметр, т. Е. pageTitle точно так же , как вы переходите к каждому компьютеру.
    Затем вы можете получить доступ к нему с панели навигации.
  • Управляйте глобальным состоянием либо с помощью специализированной библиотеки (redux/и т. Д.), Либо просто с помощью встроенного в React contextAPI.

В этом случае я бы выбрал первый метод, так как он проще, если это все, что вам нужно.

Метки: