React Routing Pages using react-router-dom

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 components
import {BrowserRouter as Router,Link,Route,Switch} 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 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>
}

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.
(you can read about react strap in my previous blogs).

<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 Switch tag.

<Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
    </Switch>

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).

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>


      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>

      </Router>

    </div>
  )
}

export default ReactStrap