October 20, 2020
React Js Routing Tutorial for Beginners

React Js Routing Tutorial for Beginners

React js routing is pretty similar to that of angular. Here, we will be using npm install react-router-dom for routing which will be added to the app.js code. Rest index.js and writing components is written just as basics. This example showcases the app.js page to have 3 links, home, blog 1, blog 2 which will route to 3 individual components. router, route, and switch have been used about which will discuss below. So, let’s get started straight away!

1.npm install react-router-dom

The first step to react js routing is definitely to install the router package. Now, there are other npm modules like react-router for again routing in react js application, but react-router-dom is browser-specific, hence it is more used. Also, reacttraining that manages reactjs development promotes the use of react-router-dom. Hence, that’s what we are going to use here also. So, in the terminal type, the command and it should not take more than a minute to install.

npm install react-router-dom

React Js Routing Tutorial for Beginners

 

2.Create components

This sample example of react js routing makes use of 3 components -Home, Blog1, Blog2.  We are creating 3 separate files for the same, with the utmost basic code of components creation.

React Js Routing Tutorial for Beginners

React Js Routing Tutorial for Beginners

React Js Routing Tutorial for Beginners

 

3.Index.js and App.js code

Index.js renders the ReactDom with App.js component attached to it. We haven’t touched this piece of the file for react js routing.

React Js Routing Tutorial for Beginners

App.js file is the one that would require you to grasp react js routing in detail. First, let’s look at the code.

React Js Routing Tutorial for Beginners

import React from ‘react’;
import { BrowserRouter as Router, Route, Link, Switch } from ‘react-router-dom’;
import Home from ‘./Home’;
import Blog1 from ‘./Blog1’;
import Blog2 from ‘./Blog2’;
class App extends React.Component {
   render() {
    return (
      <Router>
      <div>
        <h1>This is App.js File</h1>
        <ul>
          <li> <Link to=”/”>Home</Link></li>
          <li><Link to=”/blog1″>Click on Blog 1</Link></li>
          <li><Link to=”/blog2″>Click on Blog 2</Link></li>
        </ul>
        <Switch>
          <Route exact path=’/’ component={Home}></Route>
          <Route exact path=’/blog1′ component={Blog1}></Route>
          <Route exact path=’/blog2′ component={Blog2}></Route>
        </Switch>
      </div>
      </Router>
      );
   }
}
export default App;

Explanation:

import { BrowserRouter as Router, Route, Link, Switch }
BrowserRouter as Router keeps the UI in sync with the URL by using HTML5 history API. Route is the one that you use to initialize path and attach a component. path=’/blog1′ signifies as here localhost:3000/blog1 would load the component {Blog1} and <link> is what <a> was but the fact that link list the path of component that is defined in the route
Now, talking about switch, this code would work fine without <switch > also, so go ahead and feel free to remove it, the only thing lies here is that <switch> helps to route the first matched route which can be an issue in nesting routing.
say,
<Switch>
<Route path=”/blog/100″ component={blog1} />
<Route path={`/blog/:id`} component={blog2} />
</Switch>
in such cases for blog/100 blog1 would get loaded. So, it just to expand your knowledge that switch has been introduced here.

4.Run the code and test the output

Run the code using npm start and the application should run fine if the steps are followed correctly, with home being the default output on the screen. This completes your react js routing tutorial.

React Js Routing Tutorial for Beginners

This was a short tutorial on react js routing. Similar other helpful links are down below, do check them out.

Similar Posts:

 

 

 

 

admin

Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply