将道具从上层组件传递到下层组件，React Router在播放中。

Question

我目前在App.js中定义了我的应用程序中的所有Routes，希望能够将状态（作为道具）从Alignment组件传递到GPfSOA组件。 希望能够将状态（作为道具）从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>
  );
}

从父级到最孙级的顺序是App > Alignments > Alignment > GPfSOA。 试图将item.alignment（alignment的名称）从Alignment组件向下（或向上）传递到GPfSOA组件，以便它能在那里被渲染。 item.alignment是Alignmnet组件状态的一个属性。

我是否需要将这些路由设置为嵌套路由以实现这一目的（也就是将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

你的问题可以通过创建Alignment上下文来解决。

---

  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);