How to restrict your Routes and Links in React.js now with Hooks

Greg Kallai
Oct 30, 2019 · 4 min read

An example how to create custom routes and links from the react-router-dom package and extract your conditionals

Image for post
Image for post
Photo by Matt Duncan on Unsplash

In this article I am going to show you 2 examples how to restrict your Route and Link components coming from react-router-dom. I am not going into detail how this package works. If you are not familiar with the concept please check out the docs before continuing with this article.

Restricting Routes

Simple Route example 1

Here we have a basic setup where we store our user information in redux. We have some routes that are restricted to logged in users, some routes that are restricted for specific user roles (teacher and student role in this case). It is an OK solution, it prevents rendering components that we do not want certain users to see, but it is not complete.

If the user navigates to "/only-teacher" they will see an empty page. Ideally if a URL is reached which is hid behind some sort of restriction, the user should be redirected, for example to the login or index page. We can achieve that by using <Redirect />:

Simple Route example 2

Now we are truly preventing users from reaching restricted URLs, however our Content.js starts to get cluttered and we only have a couple of Routes there. We can simplify this setup by creating our own CustomRoute.js component:

CustomRoute example

To break what is happening here:

  • We use 2 hooks that have been added to the React 16.8: useState() and useEffect().
  • First we create our state with useState() that will store our component that we want to return. Initially it is empty.
  • Then we add the useEffect() hook which acts as componentDidUpdate(). By adding the [props.user] as a secondary argument we will only allow this function to execute when that user prop is changing (which should be during login or logout).
  • To get the user we use redux as in the previous example.
  • Inside the useEffect() we add a switch statement where we look for the props.condition, which we will add to determine what condition we want to check against when we callCustomRoute. I added 3 examples: isSignedIn, teacher role and student role.
  • Inside the case we have a ternary operator. If the condition is satisfied we set the state to the <Route {…props} /> which will spread and passes down all of our props down thus rendering our Route and the component we specified.
  • By setting the state with setReturnedRoute() the component will be re-rendered and returnedRoute will be equal to <Route {…props} />.
  • If the condition is not satisfied the returnedRoute will be set to <Redirect to=’/index’ /> and the user will be redirected to that URL.
  • Default case is that we do not have any condition, then we just return <Route {…props} />

After importing this CustomRoute.js in our previous example we can refactor Content.js to achieve the same result like this:

Refactored with CustomRoute

It is cleaner, we could remove redux and we could keep adding more conditionals in our CustomRoute.js and keep the logic separated there.

Restricting Links

Simple Header example with conditioned links

The structure is the same here. We store our user in redux and use ternary operators to show couple of links only for specific roles, and to hide links based whether the user is logged in or not.

The same way as with routes we could create our own CustomLink.js component to extract away this logic:

CustomLink example

Logic is the same as before:

  • We add useState() to store our Link component in.
  • Add useEffect() hook to listen to [props.user] changes (login/logout).
  • Add a switch case to check against the condition we pass down.
  • If we satisfy the condition we return the Link with props and children, if not we return null.
  • By default, if there is no condition given we return the Link with props and children.

After adding that component we can refactor our Header.js like this:

Refactored Header with CustomLink

Again we extracted away the logic, redux, and made the code cleaner.

Craft Academy

Bringing the craft of coding to a broad public — bootcamp…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store