react-router - creating nested routes with no Component nesting
Ad
I have a route config like this.
<Route path="group/:groupId" component={NonPropertyView}>
<Route path="group/:groupId/line/:lineId" component={NonPropertyView} />
<Route path="group/:groupId/line/:lineId/property/:propertyId" component={PropertyView} />
But can I do this ?
<Route path="group/:groupId" component={NonPropertyView}>
<Route path="line/:lineId" component={NonPropertyView}>
<Route path="property/:propertyId" component={PropertyView} />
</Route>
</Route>
What I am looking for is an option to just render Component
for leaf Route without rendering a parent route Component
. Is this possible?
Ad
Answer
Ad
Yes - use <IndexRoute>
s. For example, write the above as:
<Route path="group/:groupId">
<IndexRoute component={NonPropertyView} />
<Route path="line/:lineId">
<IndexRoute component={NonPropertyView} />
<Route path="property/:propertyId" component={PropertyView} />
</Route>
</Route>
Ad
source: stackoverflow.com
Related Questions
Ad
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad