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?