DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mysterio
Mysterio

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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 components
import {BrowserRouter as Router,Link,Route,Routes} from 'react-router-dom';//importing routing elements
Enter fullscreen mode Exit fullscreen mode

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

/Home page function
function Home() {
  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>
}

//About page function
function About() {
  return <h1 className="text-center display-3 text-success">This is About Page</h1>
}

//Contact page function
function Contact() {
  return <h1 className="text-center display-3 text-danger">This is Contact Page</h1>
}
Enter fullscreen mode Exit fullscreen mode

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

<Router>
//your navbar
</Router>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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 components
import {BrowserRouter as Router,Link,Route,Switch} from 'react-router-dom';//importing routing elements


//Styling the Links
const Links = {
  color:"palevioletred",
  fontSize:"2.5rem",
  margin:"2rem 0",
  fontWeight:"600",
}

//Home page function
function Home() {
  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>
}

//About page function
function About() {
  return <h1 className="text-center display-3 text-success">This is About Page</h1>
}

//Contact page function
function 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
Enter fullscreen mode Exit fullscreen mode

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

Latest comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post