Develop Reference

How to restrict routes in another layout react router v6

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?

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.

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>

How can I arrange my Routes on the App component

I have various routes and I also have some data from context api that I want to pass to certain routes, excluding some. So,
There is the <UserContext.Provider> that should be wrapped inside all the routes.
There is also the <Route element={<PrivateRoute />}> that sould be wrapped inside most of the routes because it should be checking the authenticated user.
And then there are components like <FruitsData> and <WeatherData> that I should only use to wrap <Route path="training" element={<Training />} /> which is inside <Route element={<PrivateRoute />}> and <UserContext.Provider>
So, my question. How can I wrap the component mentioned in no.3 the right way without having to wrap it around all the other components like I have done below?
<UserContext.Provider value={user}>
<WeatherData>
<FruitsData>
<Routes>
<Route element={<PrivateRoute />}>
<Route path="/" element={<Dashboard />} />
<Route path="/test" element={<TestPage />} />
<Route path="training" element={<Training />} />
<Route path="fruit-details/:fruitId" element={<FruitDetails />} />
<Route path="my-farm" element={<MyFarmList />} />
<Route path="add-farm" element={<AddFarm />} />
<Route path="farm-details" element={<FarmDetails />} />
<Route path="add-post" element={<AddPost />} />
<Route path="post-details/:postId" element={<PostDetails />} />
<Route path="infestation-details/:infestationId" element={<InfestationDetails />} />
<Route path="farm-details/:username/:farmId" element={<FarmDetails />} />
<Route path="farm-details/:username/:farmId/fruits" element={<FarmFruits />} />
<Route path="area" element={<Area />} />
<Route path="shop" element={<Shop />} />
<Route path="packages" element={<Packages />} />
<Route path="seedlings" element={<Seedlings />} />
<Route path="profile" element={<Profile />} />
<Route path="product-details/:seedlingId" element={<ProductDetails />} />
<Route path="pricing" element={<Pricing />} />
<Route path="community" element={<Community />} />
<Route path="complete-profile" element={<CompleteProfile />} />
</Route>
<Route path="admin/" element={<AdminPrivateRoute />}>
<Route path="home" element={<Home />} />
<Route path="farmers" element={<Farmers />} />
<Route path="farms" element={<Farms />} />
</Route>
</Routes>
</FruitsData>
</WeatherData>
</UserContext.Provider>
Thank you

I don't see any overt issue with the way all the context providers wrap the entirety of the routes, but if you are trying to limit the scope of any specific provider then the solution here is to have them render an Outlet component instead of the children prop and render them as layout routes.
Example:
const UserLayout = () => {
... logic/state/etc ...
return (
<UserContext.Provider value={user}>
<Outlet />
</UserContext.Provider>
);
};
const FruitesWeatherLayout = () => {
... logic/state/etc ...
return (
<WeatherData>
<FruitsData>
<Outlet />
</FruitsData>
</WeatherData>
);
};
...
<Routes>
<Route element={<UserLayout />}> // <-- layout route
<Route element={<PrivateRoute />}>
<Route path="/" element={<Dashboard />} />
<Route path="/test" element={<TestPage />} />
<Route element={<FruitesWeatherLayout />}> // <-- layout route
<Route path="training" element={<Training />} />
</Route>
<Route path="fruit-details/:fruitId" element={<FruitDetails />} />
<Route path="my-farm" element={<MyFarmList />} />
<Route path="add-farm" element={<AddFarm />} />
<Route path="farm-details" element={<FarmDetails />} />
<Route path="add-post" element={<AddPost />} />
<Route path="post-details/:postId" element={<PostDetails />} />
<Route path="infestation-details/:infestationId" element={<InfestationDetails />} />
<Route path="farm-details/:username/:farmId" element={<FarmDetails />} />
<Route path="farm-details/:username/:farmId/fruits" element={<FarmFruits />} />
<Route path="area" element={<Area />} />
<Route path="shop" element={<Shop />} />
<Route path="packages" element={<Packages />} />
<Route path="seedlings" element={<Seedlings />} />
<Route path="profile" element={<Profile />} />
<Route path="product-details/:seedlingId" element={<ProductDetails />} />
<Route path="pricing" element={<Pricing />} />
<Route path="community" element={<Community />} />
<Route path="complete-profile" element={<CompleteProfile />} />
</Route>
<Route path="admin/" element={<AdminPrivateRoute />}>
<Route path="home" element={<Home />} />
<Route path="farmers" element={<Farmers />} />
<Route path="farms" element={<Farms />} />
</Route>
</Route>
</Routes>

react nested routes default path blank page

How can I make the parent path render a default outlet in react router v6 nested routes?
As you can see in the example I want to make "/dashboard" path take me to "/dashboard/home" by default.
For now it's just rendering a blank screen in the Outlet.
<Route path={"dashboard"} element={<Dashboard />}>
<Route path={"home"} element={<Home />} />
<Route path={"users"} element={<Users />} />
</Route>

You can render an Index route to render some content when the path equals that of the parent route.
Example:
<Route path="dashboard" element={<Dashboard />}> // "/dashboard/*"
<Route index element={/* some content */} /> // "/dashboard"
<Route path="home" element={<Home />} /> // "/dashboard/home"
<Route path="users" element={<Users />} /> // "/dashboard/users"
</Route>
If you want a specific nested route to be a "default" then either render it again as the index route or render a redirect to it.
Examples:
<Route path="dashboard" element={<Dashboard />}>
<Route index element={<Home />} />
<Route path="home" element={<Home />} />
<Route path="users" element={<Users />} />
</Route>
or
<Route path="dashboard" element={<Dashboard />}>
<Route index element={<Navigate to="home" replace />} />
<Route path="home" element={<Home />} />
<Route path="users" element={<Users />} />
</Route>

How to use useMatch and useResolvedPath to validate non exactly match?

I'm creating an aplication with any routes and sub routes. This aplication has a SideBar with link to routes(pages) and this routes(pages) has links to subroutes(subpages). I want to set active class when the link match(non exactly), example:
links:
/users
/teams
/settings
(/teams/name-of-team/squads) => /teams OK!
(/users/teams/234) => /users OK!
Now, i'm using react router dom v6v example(https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-link?file=src%2FApp.tsx) but this return true only when match exactly!
The routes:
<BrowserRouter>
<Routes>
<Route path="status" element={<Status />} />
<Route path="login" element={<Login />} />
<Route path="forgot-password" element={<ForgotPassword />} />
<Route path="reset-password/:token" element={<ResetPassword />} />
<Route path="/" element={<LoggedArea />}>
{/* Inicio */}
<Route index element={<Personal />} />
{/* Dashboards */}
<Route path="dashboards">
<Route index element={<Dashboards />} />
</Route>
{/* Vagas */}
<Route path="jobs">
<Route index element={<Jobs />} />
<Route path=":name" element={<Jobs />} />
</Route>
{/* Documentos */}
<Route path="documents">
<Route index element={<Files />} />
<Route path="*" element={<Files />} />
</Route>
{/* Usuários */}
<Route path="users">
<Route index element={<Users />} />
<Route path="create" element={<CreateUser />} />
<Route path=":name" element={<User />} />
</Route>
{/* Times */}
<Route path="teams">
<Route index element={<Teams />} />
<Route path=":name" element={<Team />}>
<Route index element={<Heading3>Resumo</Heading3>} />
<Route path="overview" element={<Heading3>Resumo</Heading3>} />
<Route path="goals" element={<TeamGoals />} />
<Route path="squads" element={<TeamSquads />} />
<Route path="settings" element={<TeamSettings />} />
</Route>
</Route>
{/* Componentes */}
<Route path="ui">
<Route index element={<Ui />} />
</Route>
{/* Configurações */}
<Route path="settings" element={<Settings />}>
<Route index element={<ProfileSettings />} />
<Route path="profile" element={<ProfileSettings />} />
<Route path="security" element={<SecuritySettings />} />
</Route>
</Route>
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
My custom link component:
interface SideMenuItemProps {
icon : React.ReactNode;
label: string;
url: string;
tooltip?: boolean;
}
export function SideMenuItem(props: SideMenuItemProps) {
const resolved = useResolvedPath(props.url)
const match = useMatch({
path: resolved.pathname,
end: true
})
return(
<li className={styles.item}>
<Tooltip disabled={!props.tooltip} label={props.label} >
<Link to={props.url} className={`${styles.link} ${match ? styles.active : ''} `}>
{props.icon}
</Link>
</Tooltip>
</li>
)
}

Is it possible to have multiple BrowserRouter in react app

I have a scenario, I want to have 2 different UI in the existing react app. V1 (versions1) will have a different UI and V2 (versions2) will have a different UI.
Existing implementation is like below,
<BrowserRouter basename=“/us”>
<Version1Layout>
<Switch>
<Route exact={true} path=“/” component={Home} />
<Route exact={true} path=“/about” component={About} />
</Switch>
</Version1Layout>
</BrowserRouter >
But I want something like this:-
<div>
<BrowserRouter basename=“/us/v1”>
<Version1Layout>
<Switch>
<Route exact={true} path=“/” component={Home} />
<Route exact={true} path=“/about” component={About} />
</Switch>
</Version1Layout>
</BrowserRouter>
<BrowserRouter basename=“/us/v2”>
<Version2Layout>
<Switch>
<Route exact={true} path=“/report1” component={ReportView1} />
<Route exact={true} path=“/report2” component={ReportView2} />
</Switch>
</Version2Layout>
</BrowserRouter>
</div>
Is it possible to have multiple BrowserRouter in parallel?

You don't need to use them in parallel:
<div>
<BrowserRouter basename=“/us”>
<Switch>
<Version1Layout path={'/v1'}>
<Switch>
<Route exact={true} path=“/” component={Home} />
<Route exact={true} path=“/about” component={About} />
</Switch>
</Version1Layout>
<Version2Layout path={'/v2'}>
<Switch>
<Route exact={true} path=“/report1” component={ReportView1} />
<Route exact={true} path=“/report2” component={ReportView2} />
</Switch>
</Version2Layout>
<Redirect to={'/v1'}/>
</Switch>
</BrowserRouter>
</div>
The neat thing about Switch is it just renders the first component that has a matching path prop - you don't event need to use Route's.

You can not use multiple routers but instead you can use nested routers.
See: https://reactrouter.com/web/example/nesting