Quick Contact


    React Router

    With react install router which helps to create web application or single-page web application with navigation and with use of router navigation occurs without refreshing the page. React router uses component structure. To install react router-:

    npm install react-router-dom

    It also needed to import and export react router in files.

    Import React from ‘react’;

    Import ‘./App.css’;

    Import { Route, BrowseRouter as Router, Switch, Link } from ‘react-router-dom’;

    Import Home from ‘./pages/Home’;

    Import About from ‘./pages/About’;

    Function App () {

    Return (

    < Router>

    < div className=”container”>

    < nav>

    < ul>

    < li>

    < Link to=”/”>Home< /Link>

    < Link to=”/about”>About< /Link>

    < /li>

    < /ul>

    < /nav>

    < Switch>

    < Route path=”” component={}>

    When we create different components we don’t show always component contents to the user.

    React Router

    Here when you click employees then it will show employee component, when you click departments then it will shown department components and same with projects.

    After apply Routing it will work as-:

    React Router

    Creating different components in different JavaScript files.

    React Router
    Now we want navigation on the components for which routing is needed.

    Whether creating app need to install react router DOM or react router native. For web app react router dom is used whereas for mobile app react router native is used from node JS command prompt as-:

    Npm install react-router-dom and run project with npm start.

    Now import all component files in index.js file which are created above

    As-:

    Import {BrowseRouter, Link, Switch, Route} from ’react-router-dom’;

    And also import another component files to navigate as-:

    Import Employee from ‘./employee’;

    Import Department from ‘./department’;

    Import project from ‘./project’;

    Code in index file is written as-:

    React Router

    Copyright 1999- Ducat Creative, All rights reserved.