How to use React Router in your Application

reactjs.org

Like many popular front end frameworks today, React is built as a single page application. Many of us want our applications to move beyond the landing page, so how can we mimic the effects of traveling on our site? The answer is React router. React router is a tool that helps us handle our routes dynamically as the application renders. I’ll show you how to get started.

First you’ll need to create your React application and run npm install react-router-dom. Once it has finished installing, check your package.json file for react-router-dom to ensure it’s been installed successfully.

Next, you’ll need to create the components that you want to navigate to. For my application, I want to navigate between the home page, the about page, and the contact page, so I will create those three components. Remember to import all components and place them inside the div in app.js, as that’s where we will write the code for routing and render all of the components.

import Home from './Home'
import About from './About'
import Contact from './Contact'

Now it’s time to bring in our routing tools. To do this, we need to add the following code to app.js.

import {BrowserRouter as Router, Route, Switch} from 
‘react-router-dom’

Router allows us to wrap our application inside of a router which gives us access to the params, url, location, etc. of the browser. All of these things will be useful to help our users navigate our site. It also gives us access to props amongst all of our components, like history, which allows us to move backwards and forwards in our application. Route simply allows us to create our routes. Switch will only render the first route that matches or includes the path. Once that occurs, it will render that component and not look for any other matches. This also allows for nested routes (a route within a route, perhaps a link to a specific person’s profile from our about page) which the router by itself cannot do.

Next, wrap the <Router/> component around your div in app.js and wrap the <Route/> component around each of your components and specify the path. You must add the exact attribute to the home component so that the path matches exactly and won’t render the other components. Wrap the <Switch/> component around all of your routes, but within the <Router/>.

function App() {
  return (
    <Router>
    <Navigation/>
      <div className="App">
        <Switch>
          <Route exact path='/'>
            <Home/>
          </Route>
          <Route path='/about'>
            <About/>
          </Route>
          <Route path='/contact'>
            <Contact/>
          </Route>
        </Switch>
      </div>
    </Router>
  ); 
}

Lastly, if you’d like to add a navigation bar to your application to allow your users access to your various pages, create a Navigation component. Within your navigation component, import {Link} from react-router-dom. This will allow you to link to your components, much like linking to a show page in vanilla JavaScript.

import React from 'react'
import { Link } from 'react-router-dom'
export default function Navigation() {
  return (
    <nav className="nav-bar">
      <Link to="/">Home</Link>
      <Link to='About'>About</Link>
      <Link to='Contact'>Contact</Link>
    </nav>
  )
}

Just like that, you are now able to dynamically route to other pages in your React application. Good luck!