Question 74110 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to restrict routes in another layout react router v6 – Reactjs

I am having three layouts and they are Admin, App, CompanySetup. I need to restrict routes of app layout in admin layout and vice-versa. I shared my Code below.

Routes.js

<Route path='/'>
  <Route path='app'>
    <Route index element={<Home />}></Route>
    <Route
      path='search/category/:category'
      element={<SearchPage />}
    ></Route>
    <Route
      path='search/category/:category/name/:name'
      element={<SearchPage />}
    ></Route>
  </Route>
  <Route path='admin'>
    <Route element={<AdminRouteProvider></AdminRouteProvider>}>
      <Route
        path='dashboard'
        element={<AdminDashboard />}
      ></Route>
    </Route>
  </Route>
</Route>

AppLayout.js

<Layout className='min-vh-100 bg-white'>
  <Content className='p-4'>
    <Outlet />
  </Content>
</Layout>

AdminLayout.js

<Layout className='min-vh-100 bg-white'>
  <Sider width={240} className='bg-white border-end'>
    <Sidebar />
  </Sider>
  <Layout>
    <Header className='bg-body border-bottom'>
      <HeaderNav></HeaderNav>
    </Header>
    <Content className='p-5 bg-body'>
      <AdminRouteProvider>
        <Outlet></Outlet>
      </AdminRouteProvider>
    </Content>
  </Layout>
</Layout>

Here I am having separate layouts for '/app' and '/admin'. My issue is in admin layout '/app' is allowed. How to restrict that?

Tags:

2

Answers


  1. 0

    you can use useEffect/useEffectLayout to prevent from access the route or path of ‘/app’.

    for example-

    useEffect(()=>{
if(!JSON.parse(localStorage.getItem('admin')){
window.location.href="/app"
}
},[])

    this is just an example may this code also change according to your need. If you still facing issue just lemme know.

    Login or Signup to reply.
  2. 0

    From what I can tell you are not rendering any actual layout routes for either "/app" or "/admin". Import AppLayout and AdminLayout1 and render the appropriate layout routes.

    import AppLayout from '../path/to/AppLayout';
import AdminLayout from '../path/to/AdminLayout';

...

<Route path="/">
  <Route path="app" element={<AppLayout />}>
    <Route index element={<Home />} />
    <Route path="search/category/:category">
      <Route index element={<SearchPage />} />
      <Route path="name/:name" element={<SearchPage />} />
    </Route>
  </Route>
  <Route path="admin" element={<AdminLayout />}>
    <Route path="dashboard" element={<AdminDashboard />} />
    <Route path="*" element={<Navigate to="dashboard" replace />} />
  </Route>
</Route>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search