React: React Router

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