Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 31, 2020 08:07 pm GMT

How to use React Router

In this post, I will show you how to include React Router in your react project.

It's easy to use and it's great for improving the navigation experience.

Here's a demo of a simple navbar (and the button in the About page that redirects back to Home):

Alt Text

Now let's see how to get started with React Router.

Installation

  • Install react-router-dom
  • Note: Make sure that you're already working on a create-react-app before adding it to your project
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

Include the Router

  • Wrap your <App /> component with <BrowserRouter />
  • Add each <Route /> with its path and respective component
  • Wrap <Switch /> around your routes. Switch will start looking for a matching route and the exact attribute will make sure that it matches exactly what we want

The <Navbar /> component will take care of the <NavLink />, more on this below.

import React from 'react';import {BrowserRouter, Switch, Route} from 'react-router-dom';import About from './About';import Home from './Home'; import Navbar from './Navbar'; function App() {  return (      <BrowserRouter>        <Navbar />         <Switch>          <Route exact path="/" component={Home}/>          <Route exact path="/about" component={About}/>        </Switch>      </BrowserRouter>  );}export default App;
Enter fullscreen mode Exit fullscreen mode

Add NavLink

  • <NavLink /> will act as each Navbar link, which is using client-side routing (exclusive of single-page applications)
  • <NavLink /> comes with the activeClassName property, which will allow us to add CSS to active/non-active links
import React from 'react';import {NavLink} from 'react-router-dom'import './App.css'; export default function Navbar() {    return (        <div>            <NavLink                 activeClassName="selected"                className="not-selected"                to="/"                exact                >HOME</NavLink>            <NavLink                 to="/about"                activeClassName="selected"                className="not-selected"                exact                >ABOUT            </NavLink>        </div>    )}
Enter fullscreen mode Exit fullscreen mode

The useHistory hook

  • What does it do? It provides access to the history prop that you may use to navigate
  • In other words, useHistory can be used for redirecting which is very convenient!
import React from 'react'; import {useHistory} from 'react-router-dom'; export default function About() {    const history = useHistory()    const handleClick = () => {        history.push('/')    }    return (        <div>            <h1>ABOUT</h1>            <p>THIS IS THE ABOUT PAGE</p>            <div>                <button                     onClick={handleClick}>                    Back to Home                </button>            </div>        </div>    )}
Enter fullscreen mode Exit fullscreen mode

And that's it!


Original Link: https://dev.to/deboragaleano/how-to-use-react-router-3em5

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