Sometimes, we want to restrict access to routes in React Router.

In this article, we’ll look at how to restrict access to routes in React Router.

How to restrict access to routes in React Router?

To restrict access to routes in React Router, we set the render prop to a function that renders the component we want according to the condition we’re checking.

For instance, we write

import { Route, Redirect } from "react-router";

<Route
  exact
  path="/"
  render={() => (loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />)}
/>;

to render Redirect if loggedIn is true.

Otherwise, we render PublicHomePage.

Conclusion

To restrict access to routes in React Router, we set the render prop to a function that renders the component we want according to the condition we’re checking.