React Routing

Posted at: February 7, 2019 11:42 PM

Basic React Routing

Now react routing is divided in 3 parts:

  • react-router - For use in a web application
  • react-router-dom - For use in core application
  • react-router-native - For use in native application

In this lesson we will learn about react-router-dom for web application.

Installation

There are three types of components in React Router. Router Component, Route Component and Navigation Component. All component should be imported from react-router-dom.

For web based application, there are BrowserRouter and HashRouter components. BrowserRouter component should be used to dynamic requests and HashRouter use should be used to static website. It is preferable use to a BrowserRouter

Now we are creating file src/RoutingExample.js for example.

Import BrowserRouter as Router, Route and Link from react-router-dom

The Router accept only single child element. In this example created a div immediate after Router for single child.

Header component contains the links for navigation. Link can use to: string and to: object both.

Switch component is used to group Route together. It is only render the first one that matches the current location. The helps when multiple Route path match the same pathname.

The Route component is the main building block of React Router. You want to only render content based on the location’s pathname, you should use a element.

There are 3 ways to render element with a Route: Route component, Route render and Route children

Mostly use component prop and render prop in Route. children prop use occasionally. In component prop you can use any stateful or stateless component. render prop, which takes an in-line function. You can use the function children prop when render whether the path matches the location or not.

In this below example we have used exact for match path exactly. If not use exact then always will show home page because slash ('/') is found in all path. And also use {NoMatch} component for 404 error page. If path is not match then render {NoMatch} component.

Route props

All three render methods will be passed the same three route props

  • match
  • location
  • history

Creating Home, About and Service components for the navigate the respective url and NoMatch component for 404 error page.

Nested Route

Create Users component for nested routing. Show users listing and click on specific user for detail. Access the match prop for current url and create link on user list like as users/1 and show user detail. Also used render prop for in-line render.

If user id will come 5 then redirect to the users list.

Complete code of RouterExample.js

src/App.js

src/Index.js

Conclusion

In this lesson we have learned React routing for the web application. And we have covered Router, Route, Link and Switch component. Route props component and render. Also used nested routing and get params.

react routing react router react router params react router dom react router tutorial react router example react router link react router render react router redirect

Please leave comments

3 Comments