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

 

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.

 

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.

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

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.

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

Similar Posts:

React Js Props And Components Tutorial

React Js Installation Guide for Windows

React Js Vs React Native:Difference 2020

React Js Vs Angular : Top 10 Differences

What is React js and Why to use it-2020

 

 

from Engineer Diaries https://ift.tt/3coGR50