react-nested-route
Make nested route simple and easy to use. This package helping you to create nested route in a simple way. render your sub-component directly when router URL call, just declare Parent and Childern router and will render when router open.
Required React Router v4.2.2.
Install via NPM
$ npm install --save react-nested-route
Install via Yarn
$ yarn add react-nested-route
Usage
// make your routers<Router path="/main_router" component=MainComponent> <Route path="sub_router1" component=SubComponent1 /> <Route path="sub_router2" component=SubComponent2 /></Router> // URLs Examples// - http://yoursite/main_router// - http://yoursite/main_router/sub_router1// - http://yoursite/main_router/sub_router2
Full example
// main component (parent component)const MainComponent = <div> <h1>Main Component</h1> propschildren </div> // sub component 1const SubComponent1 = <div>Sub Component 1</div> // sub component 2const SubComponent2 = <div>Sub Component 2</div> const MyRouters = <Router path="/main_router" component=MainComponent> <Route path="sub_router1" component=SubComponent1 /> <Route path="sub_router2" component=SubComponent2 /> </Router>