How to use Private route in react-router-dom@v6

by

In react-router-dom version 6 there is no render prop for the Route component. You can also simplify your PrivateRoute wrapper component a bit, it doesn’t need to render more Routes and Route components.

Conditionally render the component’s children or navigate to log in.

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

Usage:

<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

A slightly improved version to allow nesting more private route components utilizes an outlet to handle rendering out nested routes.

const PrivateWrapper = ({ auth: { isAuthenticated } }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

Usage:

<Route element={<PrivateWrapper />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

Edit how-to-use-private-route-in-react-router-domv6

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. React router v6 how to use `navigate` redirection in axios interceptor
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Invariant failed: You should not use outside a
  12. useNavigate() may be used only in the context of a component
  13. React Router not working with Github Pages
  14. React Router Dom v6 shows active for index as well as other subroutes
  15. What is the alternative for Redirect in react-router-dom v 6.0.0?
  16. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  17. Difference in the navigation (React Router v6)
  18. ‘withRouter’ is not exported from ‘react-router-dom’
  19. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  20. react app showing empty page when redirecting on production build
  21. React App goes blank after importing React-Router-Dom
  22. React Router 4 Nested Routes not rendering
  23. You cannot render a inside another . You should never have more than one in your app
  24. Children won’t render when using a layout in ReactJS
  25. How to go back to previous route in react-router-dom v6
  26. React Router V6 – Error: useRoutes() may be used only in the context of a component
  27. react router v6 navigate outside of components
  28. Property ‘value’ does not exist on type ‘Readonly’
  29. Performing Authentication on Routes with react-router-v4
  30. React router 4 does not update view on link, but does on refresh

Leave a Comment