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 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">React Router Basics &amp; Redirect Made Easy</h1><div data-node-type="summary" class="summary-block">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.</div><p>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 <code>jquery</code> 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.</p><p>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.</p><blockquote><p><strong>React Router</strong>&nbsp;keeps your UI in sync with the URL.</p></blockquote><h2><a name="what-you-will-learn?">What you will learn?</a></h2><p>By the end of this post, you will be able to:</p><ul><li><p>Use <code>react-router</code> in your projects </p></li><li><p>To set up and install <code>react-router</code></p></li><li><p>Use the interface for using <code>react-router</code></p></li><li><p>Use the fundamental components that <code>react-router</code> offers us </p></li><li><p>Handle redirects using <code>react-router</code></p></li></ul><p>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.</p><h2><a name="what-do-you-need-to-know?">What do you need to know?</a></h2><p>To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript.  </p><p>If you do not know any of the above but would like to learn, here are some great resources:</p><ul><li><p><a href="https://www.freecodecamp.org/learn" rel="noopener noreferrer nofollow">freecodecamp </a>is a great free resource that will help you become an expert at JavaScript</p></li><li><p>The <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React </a>docs are great for getting started with react but to become an expert I recommend <a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">fullstack react</a></p></li></ul><p>Now it's time to get started on our journey of learning React.</p><h2><a name="basics-of-react-router">Basics of React Router</a></h2><p>The first step in using <code>react-router</code> is to install it.  As usual, this can be done with <code>npm</code> or <code>yarn</code>.  Since we are building a web application we will use <code>react-router-dom</code> which you will use in 99.9% of use cases.  <a href="https://github.com/ReactTraining/react-router/issues/4648" rel="noopener noreferrer nofollow">Here is a conversation</a> discussing the difference between <code>react-router</code> and <code>react-router-dom</code>.  I will be using the terms <code>react-router</code> and <code>react-router-dom</code> interchangeably.</p><p>So to install, you can run either of the following commands:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-hMMpo" id="cm-hMMpo">npm install react-router-dom
or
yarn add react-router-dom</textarea><p>We can start using the core components of <code>react-router-dom</code> now.  </p><p>When you are setting up basic routing, there are four core components you will use which are:</p><ul><li><p>BrowserRouter</p></li><li><p>Switch</p></li><li><p>Route</p></li><li><p>Link</p></li></ul><p>To demonstrate the use of the above components, imagine we have two routes in our application:</p><ul><li><p>/hello</p></li><li><p>/goodbye</p></li></ul><p>When our user visits the <code>/hello</code> route, we will render a <code>Hello</code> component and similarly when the user visits the <code>/goodbye</code> route we will render the <code>Goodbye</code> component.  We will keep the <code>Hello</code> and <code>Goodbye</code> components extremely simple so we can focus on the routing aspect.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-qp3sA" id="cm-qp3sA">const Hello = () =&gt; {
  return &lt;div&gt;Hello&lt;/div&gt;;
};

const Goodbye = () =&gt; {
  return &lt;div&gt;Goodbye&lt;/div&gt;;
};</textarea><p>So in our base component which in our example is the <code>App</code> component, we can set up our routing.</p><p>We will first use the <code>BrowserRouter</code> component and the <code>Link</code> component.</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-S00SX" id="cm-S00SX">&lt;BrowserRouter&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;Link to="/hello"&gt;Hello&lt;/Link&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;Link to="/about"&gt;Goodbye&lt;/Link&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/BrowserRouter&gt;</textarea><p>So the <code>BrowserRouter</code> component acts as a wrapper, then we have our standard HTML elements to create our navigation with an unordered list.  Instead of <code>a</code> tags, we are using our <code>Link</code> component. </p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>If you were to view the document in our browser, you will see that the <code>Link</code> component does in fact render an <code>a</code> element so don't worry if you think that your HTML is not semantic!</p></div></div><p>The <code>Link</code> component has a <code>to</code> prop which is similar to <code>href</code>, basically where should we go when the link is clicked.  In the above example when <code>Hello</code> is clicked, it will direct you to <code>/hello</code> whereas <code>Goodbye</code> will direct you to <code>/goodbye</code></p><p>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.</p><p>Now to complete our example we will use the <code>Switch</code> and <code>Route</code> component.</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-oYou9" id="cm-oYou9">&lt;BrowserRouter&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;Link to="/hello"&gt;Hello&lt;/Link&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;Link to="/goodbye"&gt;Goodbye&lt;/Link&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;

  &lt;Switch&gt;
    &lt;Route path="/hello"&gt;
      &lt;Hello /&gt;
    &lt;/Route&gt;
    &lt;Route path="/goodbye"&gt;
      &lt;Goodbye /&gt;
    &lt;/Route&gt;
  &lt;/Switch&gt;
&lt;/BrowserRouter&gt;</textarea><p>So let's first delve into exactly what the <code>Switch</code> component is doing.  Essentially all the <code>Switch</code> component is doing is looking through each of the <code>Route</code> component(s) and rendering the first one that matches the current URL.  The first default path for a website is <code>/</code>, so in our example, we will be rendering just a blank screen at the start (apart from our navigation). </p><p>The <code>Route</code> component has a <code>path</code> prop which tells our app - <code>Hey, when our URL matches this path then render my children</code> .  So when the URL is <code>/hello</code> then we render the <code>Hello</code> component.  </p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>If you are using <code>&lt;Route path="/"&gt;</code> , then you should always place this last in your Route list as this will match every route so even if the path is <code>/home</code> it will still match <code>/</code> first!</p></div></div><p>Isn't this just so intuitive?  Using the URL to decide what to render on the page!</p><p>That is the first basic example covered, you can do so much with just this knowledge!  Here is the <a href="https://codesandbox.io/s/react-router-example-oure0?file=/src/App.js:169-579" rel="noopener noreferrer nofollow">complete Codesandbox</a> so you can play around with it.</p><h2><a name="nested-routing">Nested Routing</a></h2><p>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.</p><p>We will use the same example as above but we will add an additional link called <code>Tasks</code> which will list some tasks we have, well tasks I have.</p><p>Our navigation will now look like this:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-pdWIA" id="cm-pdWIA"> &lt;BrowserRouter&gt;
   &lt;nav&gt;
     &lt;ul&gt;
      	 &lt;!-- same as example above --&gt;
       &lt;li&gt;
         &lt;Link to="/tasks"&gt;Tasks&lt;/Link&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/nav&gt;

   &lt;Switch&gt;
     &lt;!-- same as example above --&gt;
     &lt;Route path="/tasks"&gt;
       &lt;Tasks /&gt;
     &lt;/Route&gt;
   &lt;/Switch&gt;
&lt;/BrowserRouter&gt;</textarea><p>What we want to happen is when <code>tasks</code> is clicked that we present a list of tasks, which are also clickable.  Thankfully, this is very similar to the above.</p><p>When creating our tasks component we are going to use <code>useRouteMatch</code>, this hook will attempt to match the current URL.</p><p>We use <code>useRouteMatch</code> like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-QdJ3l" id="cm-QdJ3l">const match = useRouteMatch();</textarea><p>We can then use this <code>match</code> variable in the <code>to</code> prop of our <code>Link</code> component.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-jRyM4" id="cm-jRyM4">&lt;Link to={`${match.url}/${task}`}&gt;{task}&lt;/Link&gt;</textarea><p>In the above case, <code>task</code> is the current <code>task</code> in the loop, which is clear in the below code (our entire <code>Tasks</code> component)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-Wi6Yp" id="cm-Wi6Yp">const Tasks = () =&gt; {
  const match = useRouteMatch();
  const taskList = ["Clean Car", "Wash Dog", "Write Artice"];

  return (
    &lt;div&gt;
      &lt;h2&gt;Tasks&lt;/h2&gt;
      &lt;ul&gt;
        {taskList.map(task =&gt; {
          return (
            &lt;li&gt;
              &lt;Link to={`${match.url}/${task}`}&gt;{task}&lt;/Link&gt;
            &lt;/li&gt;
          );
        })}
      &lt;/ul&gt;
      &lt;Switch&gt;
        &lt;Route path={`${match.path}/:taskId`}&gt;
          &lt;Task /&gt;
        &lt;/Route&gt;
        &lt;Route path={match.path}&gt;
          &lt;h3&gt;No Task Selected&lt;/h3&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  );
};</textarea><p>So like above we use the <code>Switch</code> and <code>Route</code> component to handle our routing.  For our default route we just render:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-qdQHM" id="cm-qdQHM"> &lt;h3&gt;No Task Selected&lt;/h3&gt;</textarea><p>The last thing we need to do is to create our <code>Task</code> component.  This will use the <code>useParams</code> hook which gives us access to the selected <code>taskId</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-qQooU" id="cm-qQooU">const Task = () =&gt; {
  let { taskId } = useParams();
  return &lt;h3&gt;{taskId}&lt;/h3&gt;;
};</textarea><p>Great, we have now got nested routing in our application.  Not too bad, eh? </p><p>Here is the complete <a href="https://codesandbox.io/s/react-router-example-2-lnsre?file=/src/App.js:1454-1537" rel="noopener noreferrer nofollow">Codesandbox</a>.</p><h2><a name="react-router-redirect">React Router Redirect</a></h2><p>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 <code>login</code> page then we will redirect them to the dashboard screen.</p><p>To accomplish this, we will be using a new component from <code>react-router</code> and that is the <code>Redirect</code> component.</p><p>You can use the <code>Redirect</code> component to simply redirect a user to a different part of the application.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-zlL4m" id="cm-zlL4m">&lt;Redirect to="/" /&gt;</textarea><p>So in our example, we have some basic state in our root component so we can manage the user's logged-in status.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-AlmY9" id="cm-AlmY9"> const [isLoggedIn, setLoggedIn] = useState(false);</textarea><p>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.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-MQUnK" id="cm-MQUnK">&lt;Router&gt;
  	&lt;Switch&gt;
  		&lt;Route path="/dashboard"&gt;
    		&lt;Dashboard login={setLoggedIn} isLoggedIn={isLoggedIn} /&gt;
      	&lt;/Route&gt;
		&lt;Route path="/"&gt;
  			&lt;LoginPage login={setLoggedIn} isLoggedIn={isLoggedIn} /&gt;
    	&lt;/Route&gt;
	&lt;/Switch&gt;
&lt;/Router&gt;</textarea><p>So we pass our state into both of our components, we can then handle the redirect in our <code>Dashboard</code> component.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ClNYj" id="cm-ClNYj">const Dashboard = ({ login, isLoggedIn }) =&gt; {
  return isLoggedIn ? (
    &lt;div className="dashboard"&gt;
      Welcome to the dashboard
      &lt;br /&gt;
      &lt;button onClick={() =&gt; login(false)}&gt;Click me to log out&lt;/button&gt;
    &lt;/div&gt;
  ) : (
    &lt;Redirect to="/" /&gt;
  );
};</textarea><p>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 <code>Redirect</code> component:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-NFwXj" id="cm-NFwXj">&lt;Redirect to="/" /&gt;</textarea><p>We can do something similar in our <code>LoginPage</code> component, if the user is already logged in then we redirect them to the <code>/dashboard</code> URL.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-loQLX" id="cm-loQLX">const LoginPage = ({ login, isLoggedIn }) =&gt; {
  const loginButton = (
    &lt;button onClick={() =&gt; login(true)} className="login-button"&gt;
      Hey click me to log in
    &lt;/button&gt;
  );
  const redirect = &lt;Redirect to="/dashboard" /&gt;;
  return isLoggedIn ? redirect : loginButton;
};</textarea><p>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.</p><p>As always here is the complete <a href="https://codesandbox.io/s/redirect-example-45svd?file=/src/App.js:549-831" rel="noopener noreferrer nofollow">Codesandbox</a>.</p><h2><a name="conclusion">Conclusion</a></h2><p>Today we learned:</p><ul><li><p>How to use <code>react-router</code> in your projects </p></li><li><p>We now have the knowledge to set up and install <code>react-router</code></p></li><li><p>The interface and different components for using <code>react-router</code></p></li><li><p>The fundamental components that <code>react-router</code> offers us </p></li><li><p>How to handle redirects using <code>react-router</code></p></li></ul><p>If you're interested in learning further, I really recommend checking out the <a href="https://reacttraining.com/react-router/web/example/basic" rel="noopener noreferrer nofollow">documentation</a> as it is simply fantastic.</p><p>Have a great day.</p><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

React Router Basics & Redirect Made Easy

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript