React Routing
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
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.