ReactJs Tutorials
React Router
Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications. React Router is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.
React Router plays an important role to display multiple views in a single page application. Without React Router, it is not possible to display multiple views in React applications.
Router Installation
File name : index.php
react-router: It provides the core routing components and functions for the React Router applications.
react-router-native: It is used for mobile applications.
react-router-dom: It is used for web applications design.
you need to install react-router-dom modules in your application.
File name : index.php
npm install react-router-dom --save
Components in React Router
File name : index.php
There are two types of router components:
<BrowserRouter>: It is used for handling the dynamic URL.
<HashRouter>: It is used for handling the static request.
App.js
File name : App.js
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App
About page
File name : About.js
import React from 'react'
class About extends React.Component {
render() {
return <h1>About</h1>
}
}
export default About
Contact page
File name : Contact.js
import React from 'react'
class Contact extends React.Component {
render() {
return <h1>Contact</h1>
}
}
export default Contact
Blog page
File name : Blog.js
import React from 'react'
class Blog extends React.Component {
render() {
return <h1>Blog</h1>
}
}
export default Blog
Note :-
File name :
For Routing, open the index.js file and import all the three component files in it. Here, you need to import line: import { Route, Link, BrowserRouter as Router } from 'react-router-dom' which helps us to implement the Routing.
index.js
File name : index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
import Blog from './blog'
const routing = (
<Router>
<div>
<h1>Router Example</h1>
<Route path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/blog" component={Blog} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
Open command prompt, go to your project location, and then type npm start.
Adding Navigation using Link component
Sometimes, we want to need multiple links on a single page. When we click on any of that particular Link, it should load that page which is associated with that path without reloading the web page. To do this, we need to import <Link> component in the index.js file.
This component is used to create links which allow to navigate on different URLs and render its content without reloading the webpage.
File name : index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
const routing = (
<Router>
<div>
<h1>React Router Example</h1>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/blog" component={Blog} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
NavLink
NavLink easily identified which Link is active. The Link component allows navigating the different routes on the websites, whereas NavLink component is used to add styles to the active routes.
Navlink is used for add properties activeStyle. The activeStyle properties show which link is currently active or not after clink on link.
File name : index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
const routing = (
<Router>
<div>
<h1>React Router Example</h1>
<ul>
<li>
<NavLink to="/" exact activeStyle={
{color:'red'}
}>Home</NavLink>
</li>
<li>
<NavLink to="/about" exact activeStyle={
{color:'green'}
}>About</NavLink>
</li>
<li>
<NavLink to="/contact" exact activeStyle={
{color:'magenta'}
}>Contact</NavLink>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
React Router Switch
Switch & Route − Both are used together. Maps the target url to the component. Switch is the parent component and Route is the child component. Switch component can have multiple Route component and each Route component mapping a particular url to a component.
The <Switch> component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.
File name :
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
notfound.js
File name : notfound.js
import React from 'react'
const Notfound = () => <h1>Not found</h1>
export default Notfound
Index.js
File name : Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
import Notfound from './notfound'
const routing = (
<Router>
<div>
<h1>React Router Example</h1>
<ul>
<li>
<NavLink to="/" exact activeStyle={
{color:'red'}
}>Home</NavLink>
</li>
<li>
<NavLink to="/about" exact activeStyle={
{color:'green'}
}>About</NavLink>
</li>
<li>
<NavLink to="/contact" exact activeStyle={
{color:'magenta'}
}>Contact</NavLink>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Notfound} />
</Switch>
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
Example :- Layout.js:
File name : Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
Home.js
File name : Home.js
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js
File name : Blogs.js
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js
File name : Contact.js
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js
File name : NoPage.js
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
File name :