CODEWITHSUNDEEP
reactjsreduxreact-router
kay
kay

Reputation: 1429

How to use the same route for multiple routes in react?

This is my routes component 

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="page1" component={Page1}/>
  <Route path="page2" component={Page2}/>
  <Route path="page3" component={Page3}/>
  <Route path="articles/:id" component={DetailPage} />
</Route>

page1, page2, and page3 can be accessed from navigation bar, but DetailPage can be only accessed from each page. My path would be like: /page1 => /articles/1, and I want it to be /page1 => /page1/articles/1
is there any way that I can set current path in route component like this: 

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="page1" component={Page1}/>
  <Route path="page2" component={Page2}/>
  <Route path="page3" component={Page3}/>
  <Route path="currentPath/articles/:id" component={DetailPage} />
</Route>

or any better way?

EDIT
my index.js:

 ReactDOM.render(
    <Provider store={store}>
      <Router history={browserHistory} routes={routes} />
    </Provider>
    , document.getElementById('app')
 )

my routes.js: 

export default {
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="page1" component={Page1}/>
      <Route path="page2" component={Page2}/>
      <Route path="page3" component={Page3}/>
      <Route path="currentPath/articles/:id" component={DetailPage} />
    </Route>
}

Indeed, most of my page components are very similar. each page receives json objects and iterates a list. When you click an item in a list, you will access to DetailPage component.

Upvotes: 1

Views: 3059

Answers (3)

graham mendick
graham mendick

Reputation: 1839

I've written a JsFiddle that shows how to build your example. It uses the Navigation router instead of the React Router but I hope you're open to that. You can see that the Navigation router doesn't own your components so you can ReactDOM.render the right Page component using the page route parameter. If you've got any questions about the code, please let me know.

var {StateNavigator} = Navigation;
var {RefreshLink} = NavigationReact;

var App = ({stateNavigator}) => (
  <div>
    <RefreshLink
      navigationData={{page: 'page1'}}
      stateNavigator={stateNavigator}>
      Page 1
    </RefreshLink>
    <RefreshLink
      navigationData={{page: 'page2'}}
      stateNavigator={stateNavigator}>
      Page 2
    </RefreshLink>
    <div id="page"></div>
  </div>
)

var Page1 = ({id, stateNavigator}) => (
  <div>
    <h1>Page 1</h1>
    <RefreshLink
      navigationData={{id: 1}}
      includeCurrentData={true}
      stateNavigator={stateNavigator}>
      Show Article
    </RefreshLink>
    {id ? <DetailPage id={id} /> : null}
  </div>
);

var Page2 = ({id, stateNavigator}) => (
  <div>
    <h1>Page 2</h1>
    <RefreshLink
      navigationData={{id: 1}}
      includeCurrentData={true}
      stateNavigator={stateNavigator}>
      Show Article
    </RefreshLink>
    {id ? <DetailPage id={id} /> : null}
  </div>
);

var DetailPage = ({id}) => <h2>Article {id}</h2> 

var stateNavigator = new StateNavigator([
  {key: 'example', route: '+/{page?}+/articles/{id}', defaultTypes: {id: 'number'}}
]);

ReactDOM.render(
  <App stateNavigator={stateNavigator} />,
  document.getElementById('container'));

var pages = {
  'page1' : Page1,
  'page2' : Page2,  
}
stateNavigator.states.example.navigated = (data) => {
  var Page = pages[data.page];
  if (Page) {
    ReactDOM.render(
      <Page id={data.id} stateNavigator={stateNavigator} />,
      document.getElementById('page'));
  }
};

stateNavigator.start();

Upvotes: 0

erdysson
erdysson

Reputation: 1490

A better way is to configure and parametrize your Pages as ":page" :

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path=":page/" component={PageComponent}>
    <Route path="articles/:id/" component={DetailPage} />
  </Route>
</Route>

The possible fallback of this is to validation of the "page" parameter, and you can add a check to "PageComponent" in order to define a validation set [page1, page2, page3, etc.], which redirects or anything you want to do with it

Upvotes: 1

rgommezz
rgommezz

Reputation: 13946

Here is the basic setup to achieve what you propose:

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="page1" component={Page1}>
    <Route path="articles/:id" component={DetailPage} />
  </Route>
  <Route path="page2" component={Page2}>
    <Route path="articles/:id" component={DetailPage} />
  </Route>
  <Route path="page3" component={Page3}>
    <Route path="articles/:id" component={DetailPage} />
  </Route>
</Route>

Upvotes: 0

Related Questions