Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2022 05:22 pm GMT

Routings in React JS

Hello Everyone today i am going to show you how you can route to different page in a website using react-router-dom.

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Firstly enter these commands in your terminal-

npm install --save react-router-dom reactstrap bootstrap

Then we are going to import the required modules-

import React,{useState} from 'react'import {Navbar,NavbarBrand,Nav,NavItem,NavLink,Collapse,NavbarToggler} from 'reactstrap';//importing react-strap componentsimport {BrowserRouter as Router,Link,Route,Routes} from 'react-router-dom';//importing routing elements

First we will create three function for HOME,ABOUT and CONTACT pages which we will use to routing.

/Home page functionfunction Home() {  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>}//About page functionfunction About() {  return <h1 className="text-center display-3 text-success">This is About Page</h1>}//Contact page functionfunction Contact() {  return <h1 className="text-center display-3 text-danger">This is Contact Page</h1>}

Then we will use Router component as our entry point to the Navigation bar.

<Router>//your navbar</Router>

Then we will create a navbar using react-strap.

 <Navbar dark color="faded" className="text-dark" style={{backgroundColor:"#1F2833"}}>        <NavbarBrand style={{color:"peachpuff",fontSize:"3rem"}}>          Coder Academy        </NavbarBrand>        <NavbarToggler onClick={isToggle} />        <Collapse isOpen={toggle} navbar>          <Nav navbar className="text-center">            <NavItem>              <NavLink style={Links}>                <Link to="/">Home</Link>              </NavLink>            </NavItem><NavItem>              <NavLink style={Links}>              <Link to="/about">About</Link>              </NavLink>            </NavItem><NavItem>              <NavLink style={Links}>              <Link to="/contact">Contact</Link>              </NavLink>            </NavItem>          </Nav>        </Collapse>      </Navbar>

Did you notice that we have used Link tags to wrap our links
Well it is a react router component which points to the path the link will take when you click on that link.

You can use the Link tag like this.

<Link to="/">Home</Link>

Here the 'to' attribute is used to point to the url which the link will take you to.

Next we will use the Switch tag to provide the components to be seen when we route to some path using our link.

Here how you can use the Routes tag.

   <Routes>        <Route exact path="/"       element={<Home />} />                <Route path="/about"       element={<About />} />        <Route path="/contact"       element={<Contact />} />    </Routes>
  • Here tag is used to route to the path the url is attached to. So, when the user clicks on Home link then Route will load the content inside the Home function. Similarly when the user clicks on About link then Route will load the content inside the About function component and same for the Contact link.
  • Here the 'exact' attribute is used to match the exact url then goes to the next one if not found.
  • 'path' attribute is used to map the url to the component which needs to be rendered when we route to that url. (It means when we click the Home link then the contents inside Home component will be rendered).

  • 'element' attribute is used to pass the element which will be rendered when the url is matched to the Route

Here is the full code -

import React,{useState} from 'react'import {Navbar,NavbarBrand,Nav,NavItem,NavLink,Collapse,NavbarToggler} from 'reactstrap';//importing react-strap componentsimport {BrowserRouter as Router,Link,Route,Switch} from 'react-router-dom';//importing routing elements//Styling the Linksconst Links = {  color:"palevioletred",  fontSize:"2.5rem",  margin:"2rem 0",  fontWeight:"600",}//Home page functionfunction Home() {  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>}//About page functionfunction About() {  return <h1 className="text-center display-3 text-success">This is About Page</h1>}//Contact page functionfunction Contact() {  return <h1 className="text-center display-3 text-danger">This is Contact Page</h1>}function ReactStrap() {  const [toggle, setToggle] = useState(false);  const isToggle = () => setToggle(!toggle);  return (    <div>      <Router>      <Navbar dark color="faded" className="text-dark" style={{backgroundColor:"#1F2833"}}>        <NavbarBrand style={{color:"peachpuff",fontSize:"3rem"}}>          Coder Academy        </NavbarBrand>        <NavbarToggler onClick={isToggle} />        <Collapse isOpen={toggle} navbar>          <Nav navbar className="text-center">            <NavItem>              <NavLink style={Links}>                <Link to="/">Home</Link>              </NavLink>            </NavItem><NavItem>              <NavLink style={Links}>              <Link to="/about">About</Link>              </NavLink>            </NavItem>            <NavItem>              <NavLink style={Links}>              <Link to="/contact">Contact</Link>              </NavLink>            </NavItem>          </Nav>        </Collapse>      </Navbar>    <Routes>        <Route exact path="/"       element={<Home />} />                <Route path="/about"       element={<About />} />        <Route path="/contact"       element={<Contact />} />    </Routes></Router>    </div>  )}export default ReactStrap

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you ^^
--> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl


Original Link: https://dev.to/shubhamtiwari909/routings-in-react-js-12h1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To