Is this a good method to secure routes?

<Route path="" component={RequireAuthContextProvider}>
  <Route path="" component={RequireAdminContextProvider}>
    <Route path="" component={SystemContextProvider}>
      <Route path="/system">
          <Route path="/" component={() => <Navigate href={'/system/information'}/>}/>
          <Route path="/information" component={SystemInformation}/>
          <Route path="/users" component={SystemUsers}/>
          <Route path="/services" component={SystemServices}/>
      </Route>
    </Route>
  </Route>
</Route>

export function RequireAuthContextProvider() {

    const ctxMain = useContext(ContextMain)

    onMount(() => {
        if (!ctxMain.loggedIn()) {
            if (ctxMain.userId()) {
                ctxMain.setUserId(null)
            }
            if (ctxMain.userType()) {
                ctxMain.setUserType(null)
            }
            ctxMain.navigator('/login')
        }
    })

    return (
        <ContextRequireAuth.Provider value={{}}>
            <Outlet/>
        </ContextRequireAuth.Provider>
    )
}

export function RequireAdminContextProvider() {

    const ctxMain = useContext(ContextMain)

    onMount(() => {
        if (ctxMain.userType() !== 'admin') {
            ctxMain.navigator('/')
            ctxMain.showErrorToast('You must be an admin to access this page')
        }
    })

    return (
        <ContextRequireAdmin.Provider value={{}}>
            <Outlet/>
        </ContextRequireAdmin.Provider>
    )
}