Navigate to page if condition not met

Question

I want to redirect a user to the onboarding page if he has no organization attached to his account. But if he has an organization attached to his account, he should proceed directly to the homepage. I'm using Redux toolkit. I tried checking for this condition in the homepage but it doesn't work. How do I go about this?

const { organization } = useSelector((state) => state.organization);

const navigate = useNavigate();

useEffect(() => {
  if (!organization) {
    navigate('/auth/onboarding')
  } else {
    navigate('/admin/dashboard')
  }
}, [organization])

Does this answer your question? [Programmatically navigate using React router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — Madan Bhandari, May 04 '23 at 20:02

Mamphir · Answer 1 · 2023-05-04T20:25:56.540

I believe you will need to encapsulate all your routes with helper route component that will check for organization Rough Example using react router >6.4.0

//Router
const router = createBrowserRouter([
  {
    path: '/auth/onboarding',
    element: <div>Onboarding</div>
  },
  {
    path: '/',
    element: <OrgChecker />,
    children:[/* Rest of the routes*/]
  }
])

//App
const App = () => {
  return(
    <RouterProvider router={router} />
  )
}

//Helper Component
const OrgChecker = () => {

  React.useEffect(() => {
    if (!organization) {
      navigate('/auth/onboarding')
    }
  })
  
  return (
    <Outlet/>
  )
}

Navigate to page if condition not met

1 Answers1