· 3 min read Comments

Getting started with React Router

  1. Calligraphy Authors's Headshot
    Rahulism

    Owner


Table Of Contents


React Router is a collection of navigational components that compose declaratively with your application.

React Router is the standard routing library for React. It has a simple API with all the powerful features like lazy code loading, dynamic route matching and location transition handling built-in. It allows us to create a multi-page feel in a single page application.

Let’s see an example to understand the basic usage of React router. For example, we will consider an application with the following components.

How to use the React Router?

Sometimes you will see {BrowserRouter as Router} as the import statement. This is just a way to rename the names exports. Here we are renaming BrowserRouter to Router for ease of use.

Wrap the components (where you want to create routing) by tags.

let App = () => {
    <div className="App">
    <Nav /> {/* This component sneeds to be available on all pages*/}
     <Router>
    {/*We need to setup routing here for home, about an dashboard*/}
      <Home />
      <About />
      <Dashboard />
     </Router>
    </div>
}

Wrap all the Components (where you want to create routing ) by component.

let App = () => {
    <div className="App">
    <Nav /> {/* This component sneeds to be available on all pages*/}
     <Router>
    {/*We need to setup routing here for home, about an dashboard*/}
     <Switch>
      <Home />
      <About />
      <Dashboard />
     </Switch> 
     </Router>
    </div>
}

A <Switch> looks through all its children <Route> elements and renders the first one whose path matches the current URL. Use a <Switch> any time you have multiple routes, but you want only one of them to render at a time.

Now use the <Route> component to create routing in your application.

let App = () => {
    <div className="App">
    <Nav />
    <Router>
      <Switch>
       <Route exact path="https://xeo.co.id/arsip.cgi?id=/">
        <Home />
       </Route>
       <Route path="https://xeo.co.id/arsip.cgi?id=/about">
         <About />
       </Route> 
       <Route path="https://xeo.co.id/arsip.cgi?id=/dashboard">
         <Dashboard />
       </Route>
      </Switch>   
     </Router>
    </div>     
}

We need to use the exact prop to exactly match the link path. Otherwise, it will be routed to the first component which has that string. So if we don’t use “exact”, it will never render <About> and <Dashboard> components as they contain backslash in their names too.

import {rowserRoute, Link} from 'react-router-dom'; 
let Nam = () => (
    <div className="Nav">
      <Router>
        <ul> 
          <li> <Link to="https://xeo.co.id/arsip.cgi?id=/">Home</Link> </li>
          <li> <Link to="https://xeo.co.id/arsip.cgi?id=/about">About<Link> </li>
          <li> <Link to="https://xeo.co.id/arsip.cgi?id=/dashboard">Dashboard</Link> </li>
        </ul>
       </Router>
    </div>      
)

To create the links React Router provides us with the component which takes the to prop for the link path.

So that’s it, this I show you can create basic routing in your React application. Not only web apps React Router is also used for routing in native apps.

Thanks for Reading | Happy Coding


Share on:
Ashish Lahoti avatar
About Rahulism
I’m a front-end Developer and Blogger. Focused more on User Experience. I’m Passionate about startups