1

I have the following test code for some nested routes in React Router v4.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const IndexComp = () => (
<div>
  <p>IndexComp</p>
  <Route exact path="/comp/inner">
     <InnerComp from="child"/>
  </Route>
  <Route exact path="/comp/inner" render={() => (<InnerComp from="render"/>)} />
  <Route exact path="/comp/inner2" render={() => (<InnerComp from="render2"/>)} />
</div>
);

const InnerComp = ({ from }) => (
  <p>InnerComp from {from}</p>
);

const App = () => (
<Router>
  <Route path="/comp" component={IndexComp} />
</Router>
);

export default App;

What I expect to happen is that <Route>{children}</Route> behaves the same way as <Route render={...} />.

Therefore I would expect 'InnerComp from Child' to be rendered on the same routes as 'InnerComp from Render'.

But actually, they don't.

Is this expected behaviour for the <Route> component from React Router?

Chris Sargent
  • 171
  • 1
  • 10
  • You may want to place the more specific route first and the more generic route last. So, you may have to define `Route exact path="/comp/inner2" ` before `Route exact path="/comp/inner`." Or if you want mutually exclusive routes, use React Router Switch - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md – Veera Nov 20 '17 at 18:06
  • This is not a question of using the `` component. I actually want to render several common components and then, depending on the route, select some other components to show. But they shouldn't need to be in a switch. – Chris Sargent Nov 21 '17 at 18:42
  • Having said that, using does 'fix' it but I have a with just one route inside - doesn't really seem right. – Chris Sargent Nov 21 '17 at 18:53

0 Answers0