reactjs - Access React component from this.props.children with react-router -

i have website following react-router , react-router-relay setup:

main.jsx:

<router history={browserhistory} render={applyroutermiddleware(userelay)}>   <route path="/:classroom_id" component={mainview} queries={classroomqueries}>     <indexroute component={start} queries={classroomqueries} />     <route path="tasks" component={taskroot} queries={classroomqueries}>       <indexroute component={tasklist} queries={classroomqueries} />       <route path="task/:task_id" component={taskview} queries={classroomtaskqueries} />       <route path="task/:task_id/edit" component={taskedit} queries={classroomtaskqueries} />     </route>   </route> </router> 

the site virtual classroom, in teacher can create tasks students. these tasks can edited.

when user edits task in taskedit , hits save, changes applied , user redirected tasklist. want give user "your changes saved!" message once task edited.

i have created bootstrap alert component (<alert>) exact purpose.

for illustration purposes, assume have following mainview component (check router above):

mainview.js:

render() {   <div>     <menu />     <row>       <col md={3}>         <sidebar />       </col>       <col md={9}>         {this.props.children}  <-- start, taskroot, etc go here       </col>     </row>     <alert someprops={...} />  <-- popup component   </div> } 

normally, create alert component outside of active component , pass kind of function displays alert prop active component. similar shown here.

however, works specific component. because <alert> sits @ root-level of page (along menubar, sidebar, , other things static on pages), cannot pass prop due {this.props.children}.

allow me illustrate flow want achieve once more:

1. user saves edits task in <taskedit>.
2. edits saved , user taken <tasklist>.
3. immediately after, want <alert> trigger, , show message.

i've seen other solutions suggesting can clone children of react element , apply prop needed open alert, because of nature of react-router doesn't seem work.

how can accomplish above? there way component globally accessible? please note don't want recreate <alert> in each component. one such component whole dom.

simple answer:

put alert component once in top level view, use pubsub or event bus lib update it.

in alert component oncomponentdidmount function listen specific event , data , update state accordingly (visibility , message)

in task save function publish event event bus.

more advance answer:

use react flux library https://facebook.github.io/flux/docs/overview.html