React Router DOM is a library that allows for routing within a React application. It allows developers to easily create a single-page application (SPA) by defining different routes for different pages or views. This means that instead of loading a new page every time a user clicks on a link, the router will only update the necessary components on the page, making the overall experience faster and more seamless.
One of the most common uses of React Router DOM is to create a navbar that allows users to navigate between different views in an application. This can be done by defining a set of routes and linking to them within the navbar.
Another common use of React Router DOM is to set up routing for an application. This is done by defining different routes and linking to them within the application. Each route corresponds to a specific view or page, and when a user clicks on a link or enters a URL, the router will update the view accordingly.
What is React Router DOM?
React Router DOM is a library that allows for routing within a React application. It allows developers to easily create a single-page application (SPA) by defining different routes for different pages or views.
What are some common uses of React Router DOM?
Some common uses of React Router DOM include creating a navbar and setting up routing for an application.
Can we pass parameters to routes?
Yes, it is possible to pass parameters to routes. This can be useful for displaying dynamic content, such as user profiles or product pages.
The React Router DOM package can be found on npm, the package manager for JavaScript. The official npm package for React Router DOM is called “react-router-dom” and you can find it by following this link:
https://www.npmjs.com/package/react-router-dom
You can install it by running the command
npm install react-router-dom
// or
yarn add react-router-domif you are using yarn as package manager.
start create project
// create a react project
npx create-react-app navbar
// install react router dom
npm install react-router-domnavbar.jsx
You can use the rfce command to set up the template for this as well. Next, make sure to import the elements you want in your router, as well as BrowserRouter, Routes, and and Route from react-router-dom. Now, you’re going to set up your router template with a route for each element you want to have in your navbar.
import React from 'react'
import { Link } from 'react-router-dom';
import MenuIcon from '@mui/icons-material/Menu';
import { useState } from 'react';
const Navbar = () => {
const [show, setShow] = useState(true)
const handleShow = () =>{
setShow(current=>!current)
}
return (
<header>
<div className="logo">
Company
</div>
<div id={show && `d-menu`} className={`display-menu`}>
<Link className='menu' to={"/"}>Home</Link>
<Link className='menu' to={"/portfolio"}>Portfolio</Link>
<Link className='menu' to={"/services"}>Services</Link>
<Link className='menu' to={"/about"}>About</Link>
</div>
<button onClick={handleShow} className='toggle'><MenuIcon /></button>
</header>
)
}
export default Navbar;What is Components In React?
A React component is a reusable piece of code that represents a part of a user interface (UI) in a React application. It is a JavaScript class or function that returns a React element, which is a lightweight description of a UI element. Components allow developers to break down a complex UI into smaller, more manageable parts that can be easily reused and composed to create a complete user interface.
React components are typically defined using a declarative syntax, which makes them easy to read and understand. They can also accept props (short for “properties”), which are input values that can be passed to the component to customize its behavior or appearance. Additionally, React components can maintain their own internal state, which allows them to change dynamically in response to user interactions or other events.
React provides a set of built-in components, such as <div>, <p>, and <button>, that can be used to create a basic UI. However, developers can also create their own custom components to better suit the needs of their application.
components/banner.jsx
import React from 'react'
const Banner = (props) => {
return (
<div className='container'>
<div className="banner">
<div className='content'>
<h1>{props.head1} <span>{props.head2}</span></h1>
<p className='mt-2'>{props.content}</p>
{props.data}
</div>
<img className='img' src={props.image} alt="" />
</div>
</div>
)
}
export default Bannerhome.jsx
import React from 'react'
import Banner from './components/Banner'
import homeimage from "./home.png"
const Home = () => {
return (
<div>
<Banner
head1="Welcome"
head2="World"
content={"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora temporibus quas similique consequatur esse expedita tenetur dignissimos, odio blanditiis necessitatibus, placeat sequi, praesentium illum quisquam inventore! Corporis eius quisquam atque!"}
image={homeimage}
data={<button className='mt-2'>Read more</button>}
/>
</div>
)
}
export default HomeAbout.jsx
import React from 'react'
import aboutImage from "./about.png"
import Banner from './components/Banner'
import {Button} from 'my-button-library'
const About = () => {
return (
<Banner
head1="About"
head2="Me"
content={"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora temporibus quas similique consequatur esse expedita tenetur dignissimos, odio blanditiis necessitatibus, placeat sequi, praesentium illum quisquam inventore! Corporis eius quisquam atque!"}
image={aboutImage}
data={<Button className='mt-2'>About more</Button>}
/>
)
}
export default About;protfolio.jsx
import React from 'react'
const Portfolio = () => {
return (
<div>Portfolio</div>
)
}
export default Portfolioservice.jsx
import React from 'react'
const Services = () => {
return (
<div>Services</div>
)
}
export default Servicesindex.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 60px;
box-shadow: 1px 1px 3px 3px rgb(61, 60, 60, 0.4);
}
header .logo{
font-size: 30px;
color: #777;
}
header .display-menu{
display: flex;
align-items: center;
justify-content: space-around;
}
.mt-2{
margin-top: 20px;
}
.display-menu .menu{
padding: 0 15px;
text-decoration: none;
color: #333;
}
header .toggle{
background-color: rgb(8, 158, 239);
color: #fff;
display: none;
border: none;
font-size: 12px;
height: 35px;
width: 35px;
text-align: center;
align-items: center;
border-radius: 3px;
}
.display-none{
display: none;
}
.container{
max-width: 1100px;
display: block;
margin: auto;
}
span{
color: rgb(8, 158, 239);
}
.banner{
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
max-width: 900px;
margin: auto;
min-height: 400px;
}
.banner .content{
display: block;
max-width: 50%;
color: rgb(83, 81, 81);
}
.content h1{
font-size: 50px;
}
.content p{
font-size: 17px;
}
button{
height: 35px;
width: 90px;
align-items: center;
color: #fff;
background-color: rgb(8, 158, 239);
border: none;
border-radius: 4px;
}
.banner .img{
display: block;
height: 100%;
max-width: 50%;
width: auto;
}
@media screen and (max-width: 900px) {
header .display-menu{
position: absolute;
top: 60px;
width: 100%;
background-color: #eae8e8;
flex-direction: column;
padding: 20px 0;
}
.display-menu .menu{
padding: 15px;
}
#d-menu{
display: none;
}
header .toggle{
display: block;
}
}
package.json
If you are facing any error related to the packages then you can use this package.json. Just remove [node_modules] and package.lock.json and use this code for package.json. and use the command [npm i] to install the packages.
{
"name": "navbar",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"my-button-library": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.5.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
In conclusion, React Router DOM is a powerful tool that can greatly enhance the user experience of a React application by providing easy navigation and dynamic content. By understanding the basics of how it works, developers can easily add routing and navigation to their projects.
