Link

React Router | NPM React Router Dom

React Router is a collection of navigational components that compose declaratively with your application.

React router gives us three components [BrowserRouter, Route, Link] which helps us to implement the routing to the apps.

Route History:
Every router creates history object to keep track of the current location of the page.

There are two types of router object:
1.      BrowserRouter
2.      HashRouter

If we want to handle the dynamic request then use BrowserRouter and if we want to serve the static request then use HashRouter.

Is React Router Static or Dynamic?
Before the react router v4 it is static after v4 it is Dynamic.

As an Example 1,

First we need to create a react app and the need to install “react router dom” npm command.

Install –
npm i react-router-dom

Currently, in our app, there is only a single App component. This component created by default when react app was created.

 Now we need to create some other component for routing purpose. In this demo, I have created multiple components i.e.
1.      Home (home.js)
2.      Users (users.js)
3.      UserDetail (userDetail.js)
4.      AddUserDetail (addUserDetail.js)

Note – App component (app.js) is created at the time when project are created.

Now our app has five components one is App and the other four are Home, Users, UserDetail, AddUserDetail, and App.

Open the index.js file and import the App and BrowserRouter components

index.js -
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

import App from './App';
import {BrowserRouterfrom 'react-router-dom'

ReactDOM.render(
        <BrowserRouter>
            <App />
        </BrowserRouter>
        document.getElementById('root')
    );

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();


Create an AppRouter and import the Switch, Route, Redirect components from the “react router dom” and also import our custom components (Home, Users, UserDetail, AddUserDetail) in the Approuter i.e.

Approuter.js
import React from 'react';

import {SwitchRouteRedirectfrom 'react-router-dom';

import Home from './view/home/home';
import Users from './view/addblog/Users';
import UserDetail from './view/UserDetail/UserDetail';
import AddUserDetail from './view/AddUserDetail/AddUserDetail';

  function AppRouter() {
    return(
        <Switch>
            <Route path='/' exact component={Home} />
            <Route path='/users' component={Users} />
            <Route path='/UserDetail' component={UserDetail} />
            <Route path='/AddUserDetail' component={AddUserDetail} />

            <Redirect from='/*' to='/pagenotfound' />
        </Switch>
    )
}

export default AppRouter;

Now come to the App.js and import Approuter,

import React from 'react';
import './App.css';

import AppRouter from './Approuter'

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;


Finally Use this react routing in your components,

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

export default class Header extends Component {
    constructor(props) {
        super(props);
        this.state = this.props.location.state;
    }

    componentDidMount() { }

    render() {
        return (
            <>
                <div><Link to="/users">User List</Link></div>
                <div><Link to="/UserDetail">User Info</Link></div>
                <div><Link to="/AddUserDetail">Add New User</Link></div>
            </>
        )
    }
}

As an Example 2,

Installation -
npm install react-router-dom --save 

Then with a module bundler like webpack, use as you would anything else:

export default App;

// using ES6 modules
import { BrowserRouterRouteLink } from "react-router-dom";

// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;


Explore this example in detail- click…
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^