CODEWITHSUNDEEP
reactjsreact-router
Ivan
Ivan

Reputation: 10372

Using two independent paths in React Router

I am currently using React Router and have routes that use the browserHistory, for example:

import { Router, Route, IndexRedirect, browserHistory } from 'react-router';

<Router history={browserHistory}>
  <Route path="tasks" component={Tasks}>
    <IndexRoute component={List} />
    <Route path="/:id" component={Item} />
  </Route>
</Router>

Which allows me to do routes such as:

This works, but we have come across a situation where we have two views that are displayed at the same time. We'd like for the link to be shareable and have the app open with both views.

So for example, if we have tasks on the left side of the screen, and a shop on the right, we'd like for there to be two independent parts of the path, something like:

The shop route should be independent of the left of the hash, and the tasks route should be independent of the right of the hash, so that /new-feature/xyz/#/shop/item/xyz should still render the same view on the right side of the window.

Is it possible to have React Router do routes like this? Or will I have to write a custom router to solve this?

I'm guessing I'd basically have to combine the browserHistory and hashHistory together, but I don't think that's possible with React Router out of the box.

Upvotes: 4

Views: 1868

Answers (2)

vilicvane
vilicvane

Reputation: 12413

We have developed our own router Boring Router with "parallel routing" support, though it depends on MobX and works differently with React Router in many ways.

In Boring Router, a parallel route is stored as query string parameter prefixed with _. E.g., /app/workbench?_sidebar=/achievements.

Check out a complete example here.

Upvotes: 1

azium
azium

Reputation: 20614

I think rolling your own router just to handle this case might be a little overboard. You can have as many different paths in your route config as you want, and access param information in your components:

<Router history={browserHistory}>
  <Route path="/" component={App} />
  <Route path="/tasks/:taskId" component={App} />
  <Route path="/shop/:shopId" component={App} />
  <Route path="/tasks/:taskId/shop/:shopId" component={App} />
</Router>

let App = ({ params }) => // simplified
  <div>
    { params.shopId && <Shop /> }
    { params.taskId && <List /> }
  </div>

Just a thought.. I think there are several ways to augment this to handle more complex scenarios but this would definitely work for what you've specified in the question (for the most part).

Update: Above is 'hardcoded', but of course you do not need to write out every combination by hand. This is what loops are for.

import * as routeComponents from './routeComponents'

<Router history={browserHistory}>
  { routeComponents.map(r => <Route {...r} />) }
</Router>

let App = ({ params }) => 
  <div>
    { routeComponents.reduce((matches, r) => ([
        ...components,
        ...(params[r.slug] ? [r.component] : [])
    ]), [])}
  </div>

Upvotes: -1

Related Questions