Blog / Quick-fixes

How to use React Router with an optional path parameter

How to use React Router with an optional path parameter

In this post find the quick and simple solution for how to use React Router with an optional path parameter - Quick Fix Series!

Will MaygerWill Mayger
August 04, 2021
Article

In this quick post we will be covering how to use React Router with an optional path parameter so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - React router with optional path parameters

Generally speaking if you are using path parameters in React Router which are defined with a colon in the path string, you shouldn’t need to have optional parameters.

If a parameter is optional it is probably going to be better suited as a GET parameter instead of a path parameter because optional path parameters will get pretty confusing, especially if someone working on them lacks context.

Here is an example of a non-optional path parameter:

<BrowserRouter>
  <Switch>
    <Route path="/example/:someParam" component={ExampleComponent} />
  </Switch>
</BrowserRouter>

There are times when using a GET parameter is not as easy as using an optional path parameter though, and one of these times could be when you are trying to render a specific component for a given route regardless of if the parameter is there or not.

The Solution - Using React Router with an optional path parameter.

As I have mentioned before, I believe that if you need an optional parameter in most cases you should probably be making use of a GET parameter instead of an optional path parameter.

With that said, let’s take a look at how you can use an optional path parameter in React Router.

To add in an optional path parameter in React Router, you just need to add a ? to the end of the parameter to signify that it is optional.

Here is an example:

<BrowserRouter>
  <Switch>
    <Route path="/example/:someParam?" component={ExampleComponent} />
  </Switch>
</BrowserRouter>

If you were using a GET parameter instead you wouldn’t need to add in any path parameter so instead your React Router would look like the following:

<BrowserRouter>
  <Switch>
    <Route path="/example" component={ExampleComponent} />
  </Switch>
</BrowserRouter>

And then in your component you could access the GET parameters using the location.search prop that is passed in by React Router.

Let’s use the above example and assume that a request is being made with the following GET parameter /example?name=John

Here is how we could then use it in our component:

export default function ExampleComponent({ location }) {
  const name = new URLSearchParams(location.search).get("name")
  return <h1> Hello {name} </h1>
}

Summary

There we have the quick fix to how to use React Router with an optional path parameter, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.