
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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.

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-:

Creating different components in different JavaScript files.

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-:

Apply now for Advanced React Js Course