In this post, we will discuss what React Router is and then with the fundamentals in place we will dive into how to handle redirect.

Handling routing in web applications has always been a massive challenge.  When I used to think of routing, I flash back to my days of using 

 and hiding/showing content depending on the current state of the application.  This was painful, led to some crazy bugs and also messy code.  Thankfully, we have evolved since then and we have much better ways of managing both state and routing in our applications.

We will delve into routing in this post, especially how to handle redirects i.e. when a user goes to a certain URL, we instead send them to another.

By the end of this post, you will be able to:

Ok, that may seem like quite a lot and you may be a little overwhelmed but we will take it piece and piece, it will all come together in the end.

To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript.  

If you do not know any of the above but would like to learn, here are some great resources:

Now it's time to get started on our journey of learning React.

 is to install it.  As usual, this can be done with 

.  Since we are building a web application we will use 

 which you will use in 99.9% of use cases.  

So to install, you can run either of the following commands:

npm install react-router-dom
or
yarn add react-router-dom

We can start using the core components of 

When you are setting up basic routing, there are four core components you will use which are:

To demonstrate the use of the above components, imagine we have two routes in our application:

 component and similarly when the user visits the 

 components extremely simple so we can focus on the routing aspect.

const Hello = () => {
  return <div>Hello</div>;
};

const Goodbye = () => {
  return <div>Goodbye</div>;
};

So in our base component which in our example is the 

<BrowserRouter>
  <nav>
    <ul>
      <li>
        <Link to="/hello">Hello</Link>
      </li>
      <li>
        <Link to="/about">Goodbye</Link>
      </li>
    </ul>
  </nav>
</BrowserRouter>

 component acts as a wrapper, then we have our standard HTML elements to create our navigation with an unordered list.  Instead of 

If you were to view the document in our browser, you will see that the 

 element so don't worry if you think that your HTML is not semantic!

, basically where should we go when the link is clicked.  In the above example when 

So not too bad, right?  The react router team has done a great job of making it as easy as possible to get up and running quickly with react router.

Now to complete our example we will use the 

<BrowserRouter>
  <nav>
    <ul>
      <li>
        <Link to="/hello">Hello</Link>
      </li>
      <li>
        <Link to="/goodbye">Goodbye</Link>
      </li>
    </ul>
  </nav>

  <Switch>
    <Route path="/hello">
      <Hello />
    </Route>
    <Route path="/goodbye">
      <Goodbye />
    </Route>
  </Switch>
</BrowserRouter>

So let's first delve into exactly what the 

 component is doing.  Essentially all the 

 component is doing is looking through each of the 

 component(s) and rendering the first one that matches the current URL.  The first default path for a website is 

, so in our example, we will be rendering just a blank screen at the start (apart from our navigation). 

Hey, when our URL matches this path then render my children

 , then you should always place this last in your Route list as this will match every route so even if the path is 

Isn't this just so intuitive?  Using the URL to decide what to render on the page!

That is the first basic example covered, you can do so much with just this knowledge!  Here is the 

Before we head into our redirect example, I first want to go through nested routing as it is quite important to know when setting up routing in your application.

We will use the same example as above but we will add an additional link called 

 which will list some tasks we have, well tasks I have.

<BrowserRouter>
   <nav>
     <ul>
      	 
       <li>
         <Link to="/tasks">Tasks</Link>
       </li>
     </ul>
   </nav>

   <Switch>
     
     <Route path="/tasks">
       <Tasks />
     </Route>
   </Switch>
</BrowserRouter>

 is clicked that we present a list of tasks, which are also clickable.  Thankfully, this is very similar to the above.

When creating our tasks component we are going to use 

, this hook will attempt to match the current URL.

 in the loop, which is clear in the below code (our entire 

 component to handle our routing.  For our default route we just render:

The last thing we need to do is to create our 

 hook which gives us access to the selected 

const Task = () => {
  let { taskId } = useParams();
  return <h3>{taskId}</h3>;
};

Great, we have now got nested routing in our application.  Not too bad, eh? 

This is the final part we are going to cover which will be much easier as we have covered all the basics above.  Handling redirects in a web application is very common, if a user tries to go to your dashboard screen but they are not logged in then you want to redirect them to the login screen.  Similarly, if a user is already logged in and they attempt to go to the 

 page then we will redirect them to the dashboard screen.

To accomplish this, we will be using a new component from 

 component to simply redirect a user to a different part of the application.

So in our example, we have some basic state in our root component so we can manage the user's logged-in status.

 const [isLoggedIn, setLoggedIn] = useState(false);

We have a couple of routes set up, one is for our dashboard and the other is our default route which presents the login page.

So we pass our state into both of our components, we can then handle the redirect in our 

const Dashboard = ({ login, isLoggedIn }) => {
  return isLoggedIn ? (
    <div className="dashboard">
      Welcome to the dashboard
      <br />
      <button onClick={() => login(false)}>Click me to log out</button>
    </div>
  ) : (
    <Redirect to="/" />
  );
};

So handling the redirect isn't as challenging as it may seem, we simply have ternary in place and if our user is not logged in then we render our 

 component, if the user is already logged in then we redirect them to the 

That is how you handle redirects, there are certainly more complicated areas you may have to handle but they will be all based on this logic.

If you're interested in learning further, I really recommend checking out the 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

React Router Basics & Redirect Made Easy

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript