Pavel Poberezhnyi Pavel Poberezhnyi - 18 days ago 13
React JSX Question

relative routing in react-router

Did anyone know how to create for any path that ends with '/popup-image-:id' ? i have website where each image could be opened in popup on any page. So, if i couldn't implement '/popup-image-:id' i have to double each route in my website to place inside. I would like avoid redundance and fragility.
my current routing:

<Router history={browserHistory}>
<Route path="/" component={Base}>
<Route path="profile" component={Profile}>
<Route path="popup-image-:id" component={Full_Piture} />
</Route>
<Route path="feed" component={Feed_List}>
<Route path="popup-image-:id" component={Full_Piture} />
</Route>
<Route path="user-:id" component={User_Page}>
<Route path="popup-image-:id" component={Full_Piture} />
</Route>
</Route>
</Router>


As u can see i had to produce a lot of duplicated code. If i could write something like
<Route path="*/popup-image-:id" component={Full_Piture} />
it will be much cleaner and solid code

Answer

Is the parent <Route> also supposed to match? If it isn't, you should be able to use the ** syntax.

<Route path="/**/popup-image-:id" component={Full_Picture} />

If the parent <Route> should also match, you could create a <RouteWithPopup> component that returns a <Route> which has the <Route path='popup-image-:id'> as its child.

const RouteWithPopup = (props) => {
  return (
    <Route {...props}>
      <Route path="popup-image-:id" component={Full_Picture} />
    </Route>
  )
}

Then you could turn your route config into:

<Router history={browserHistory}>
  <Route path="/" component={Base}>
    <RouteWithPopup path="profile" component={Profile} />
    <RouteWithPopup path="feed" component={Feed_List} />
    <RouteWithPopup path="user-:id" component={User_Page} />
  </Route>
</Router>