Передача реквизита от компонента более высокого уровня к компоненту более низкого уровня, React Router в игре

Question

В настоящее время все маршруты в моем приложении определены в приложении. js. Хотелось бы иметь возможность передавать состояние (как свойства) от компонента Alignment вниз к компоненту GPfSOA.

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route path="/alignments" exact component={Alignments} />
          <Route path="/alignments/:id" exact component={Alignment} />
          <Route path="/alignments/segmentinfo/:id" exact component={Segments} />
          <Route path="/alignments/segmentinfo/:id/:segid" exact component={Segment} />
          <Route path="/alignments/getpoint/:id" exact component={GPfSOA} />
          <Route path="/alignments/getstatoff/:id" exact component={GSOfPA} />
          <Route path="/alignments/getalsfromxy/:x/:y" exact component={AlignList} />
          <Route path="/alignments/getsegsfromxy/:x/:y" exact component={SegmentList} />
          <Route path="/alignments/post/create" exact component={AddAlignment} />
          <Route path="/alignments/put/update/:id" exact component={EditAlignment} />
          <Route path="/alignments/ptso/list" exact component={TogglePoints} />
          <Route path="/alignments/ptso/list/:ptid" exact component={Point} />
          <Route path="/" render={() => <div>404</div>} />
        </Switch>
      </div>
    </Router>
  );
}

Порядок от родителя к величайшему внуку будет следующим: Приложение> Выравнивания> Выравнивание> GPfSOA . Попытка передать item.alignment (имя выравнивания) из компонента Alignment вниз (или поверх) в компонент GPfSOA, чтобы его можно было отрендерить там. item.alignment - это свойство состояния компонента Align mnet.

Нужно ли мне настраивать их как вложенные маршруты, чтобы выполнить sh это (то есть вырезать и вставить все маршруты из App. js, которые являются дочерними по отношению к компоненту Alignment, и вставьте их в компонент Alignment)?

Трудно понять, как определить конкретный компонент как родительский, а другой компонент как дочерний для этого компонента . Во всех примерах, которые я вижу, предполагается, что вы хотите передать реквизиты из App. js в какой-то другой компонент. Ищете примеры с React Hooks и React Router в игре (функции, а не классы), в которых вы передаете реквизиты из компонента «ниже» App. js вниз другому компоненту, который находится ниже по иерархии. Надеюсь, это имеет смысл.

Нашел множество примеров, таких как этот для «передачи функции в качестве реквизита рендеринга в компоненте Route» (предположительно, рекомендуемый способ сделать это)

const PropsPage = () => {
  return (
    <h3>Props Page</h3>
  );
};

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Link to="/404-not-found">404</Link>
        <Link to="/props-through-render">Props through render</Link>
        <Switch>
          ...
          <Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
      <a href="/about">about with browser reload</a>
    </section>
  );
};

export default App;

Но, как я уже говорил ранее, этот и все другие примеры, которые я нашел, предполагают, что вы хотите передать реквизиты из App. js другому компоненту.

Answer 1

Ваша проблема может быть решена с помощью создания контекста выравнивания

---

  import React, { createContext, useState } from "react";

  const AlignmentContext = createContext();
  const AlignmentContextProvider = ({ children }) => {
     const [num, setNum] = useState(1);
   };

     return (
      <AlignmentContext.Provider value={{ num, setNum }}>
         {children}
      </AlignmentContext.Provider>
    );
   };

 export { AlignmentContext, AlignmentContextProvider };

---

теперь оберните ваши маршруты, которые должны быть в одном контексте, с AlignmentContextProvider

---

     import { AlignmentContextProvider } from 'pathto/context'

     <AlignmentContextProvider>
      <Route path="/alignments/:id" exact component={Alignment} />
      <Route path="/alignments/segmentinfo/:id" exact component={Segments} />
      <Route path="/alignments/segmentinfo/:id/:segid" exact component={Segment} />
      <Route path="/alignments/getpoint/:id" exact component={GPfSOA} />
     </AlignmentContextProvider>

---

и используйте useContext крючки для достижения значений

---

    import React, { useContext } from "react";
    import { AlignmentContext } from 'pathto/context';

    const GPfSOA = () => {
     const { num, setNum } = useContext(AlignmentContext);