Passing props from higher level component to lower level component, React Router in play

Question

I currently have all the Routes in my app defined in App.js. Would like to be able to pass state (as props) from the Alignment component down to the GPfSOA component.

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

The order from parent on down to the greatest grandchild would be App > Alignments > Alignment > GPfSOA. Trying to pass item.alignment (the alignment's name) from the Alignment component down (or over) to the GPfSOA component so that it can be rendered there. item.alignment is a property of the Alignmnet component's state.

Do I need to set these up as nested routes in order to accomplish this (a.k.a. cut and paste all the Routes from App.js that are children of the Alignment component and paste them into the Alignment component)?

Having a hard time understanding how to define a particular component as being a parent and another component as being a child of that component. All the examples I see assume you want to pass props from App.js down to some other component. Looking for examples with React Hooks and React Router in play (functions rather than classes) where you're passing props from a component 'below' App.js down to another component that's further down in the hierarchy. Hope this makes sense.

Found lots of examples such as this one for 'passing function as a render props in Route component' (supposedly the recommended way to do this)

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;

But like I stated before, this example and every other one I've found assume you want to pass props from App.js down to another component.

Answer 1

Your issue can be handle with creating Alignment context

---

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

---

now wrap your routes needed to be in same context with 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>

---

and use useContext hooks for reach values

---

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

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