How to share a sub Route between different parents Route?

[ohmyhusky]

I have a question about organising sub components.

Let's say we have a very common used popup component Auth, we want to use it in different pages like home page and repo page, if we use actions like click to load the Auth that will be pretty easy, so we can load the same Auth component in different pages.

What I want to know is if we can use router to do this job, so we can manage the Auth component by router and easy to go forward and go back and even can be trigger by outer link.

Suppose we have the home page with url /home and the repo page with url /repo, we want to use the Auth popup in both these two pages, is it a good practice to handle this job by push a sub url /auth to the current url and make it to /home/auth and /repo/auth?

Now I implemented this by

<Route path="/home" component={Home}>
    <Route path="auth" component={Auth}/>
  </Route>

and

<Route path="/repo" component={Repo}>
    <Route path="auth" component={Auth}/>
  </Route>

The problem is

1. When I have plenty shared sub components and I want to share them in plenty parents component, I have to put all sub components in every parents route.
2. I don't know if is a good idea to mount the sub components in a root route.
3. If there are some params in the parents route like /home?email=some@do.com, is that a bad idea to add a sub url to it and make it to /home/auth?email=some@do.com but still pass the param to home route instead of auth route?

If you have some good ideas about the shared sub components work with different parents Routes kind of thing, please help ~ Thanks a lot in advance!

[ohmyhusky]

Found the solution https://reacttraining.com/react-router/web/example/modal-gallery