Reactjs 将道具从较高级别的组件传递到较低级别的组件，在游戏中反应路由器

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

函数应用程序（）{
返回(
404} />
);
}

从父代到最大孙辈的顺序是App>Alignments>Alignment>GPfSOA。正在尝试将item.alignment（路线的名称）从路线组件向下（或向上）传递到GPfSOA组件，以便可以在那里进行渲染。item.alignment是Alignmnet组件状态的属性

我是否需要将这些设置为嵌套管线以完成此操作（即从App.js中剪切并粘贴所有路线，这些路线是路线组件的子项，并将其粘贴到路线组件中）

很难理解如何将特定组件定义为父组件，将另一个组件定义为该组件的子组件。我看到的所有示例都假设您希望将道具从App.js传递到其他组件。寻找使用React钩子和React路由器的示例（函数而不是类），其中您将道具从“下面”App.js的组件传递到层次结构中更下面的另一个组件。希望这是有意义的

找到了许多示例，例如“传递函数作为管线组件中的渲染道具”（据说是推荐的方法）

constpropspage=（）=>{
返回(
道具页面
);
};
常量应用=（）=>{
返回(
...
404
通过渲染的道具
...
} />
);
};
导出默认应用程序；

---

但正如我前面所说的，这个例子和我找到的其他例子都假设您希望将道具从App.js传递到另一个组件。

您的问题可以通过创建对齐上下文来解决

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

---

---

并使用

useContext

挂钩获取到达值

---

---

把这个问题留给其他可能遇到这个问题的人，我仍然试图把我的脑袋绕过去：你可以编辑你的问题以反映你当前的问题，然后我也可以编辑我的答案。对不起，接受你的答案花了这么长时间。除了一件事之外，它还能工作——如果有一些路由我不想在AlignmentContextProvider包装器中怎么办？根据这句话：“a的所有子元素都应该是或元素。”在这里找到了一个类似的帖子，展示了一个解决方法：它应该在我的情况下起作用，因为我不需要更新对齐组件之外的状态。

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

     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>

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

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