Monday, August 8, 2016

Basic React Routes

In this post I will demonstrate how to implement basic routes with ReactJS. First install following node dependencies accordingly.
Then add webpack.config.js file and index.html file accordingly. I have already explained above these configurations in my previous ReactJS posts.
Then add Help.js, Home.js, Student.js and StudentDetails.js files.
In Student.js file we can see an import statement of react-router, which will handle routing functionality. This will sync UI with URL by having components associated with routes. Child components make available in parent components by using this.props.childrenLink will generate navigation links accordingly using react-router.
Next will add App.js file. In here, instead of rendering App component to the DOM, we pass Router compoenent with predefined routes. To configure index route, we can use IndexRoute.
Final output will be like below.

No comments:

Post a Comment