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 React-Router-Dom v6 properly distribute internal routers among components?

There is routing at the top level with internal routing, the question arose to add routing inside components such as ProductsPage, ElementsPage, etc.
<BrowserRouter>
<Routes>
<Route path='/' element={<PageLayout />}>
<Route path='marketplace'>
<Route path='products' element={<ProductsPage />} />
<Route path='constituents' element={<ElementsPage />} />
<Route path='resources' element={<ResourcesPage />} />
<Route path='shopping' element={<ShoppingPage />} />
</Route>
<Route path='resource-center'>
<Route path='planner' element={<>планирование</>} />
<Route path='resources' element={<>resources</>} />
</Route>
<Route path='*' element={<>Страница не найдена 404</>} />
</Route>
</Routes>
</BrowserRouter>
The question is how to do this in version 6. Because before version five, you could easily throw a switch into a component a la ProductsPage and specify routes in the switch

You can name all pages explicitly.
<BrowserRouter>
<Routes>
<Route path='/' element={<PageLayout />} />
<Route path='/marketplace/products' element={<ProductsPage />} />
<Route path='/marketplace/constituents' element={<ElementsPage />} />
<Route path='/marketplace/resources' element={<ResourcesPage />} />
<Route path='/marketplace/shopping' element={<ShoppingPage />} />
<Route path='/resource-center/planner' element={<планирование />} />
<Route path='/resource-centerresources' element={<resources/>} />
<Route path='*' element={<Страница не найдена 404/>} />
</Routes>
</BrowserRouter>

Route Naming in React Js

**Working Routes**
<Route path="/moversng" component={AppMoverLandingPage} />
<Route path="/movers-ng/dashboard/login" component={AppMoverLogin} />
<Route path="/movers-ng/dashboard" component={AppDashboard} />
<Route path="/movers-ng/manage-users" component={AppManageUsers} />
**What I wanted but not working**
<Route path="/moversng" component={AppMoverLandingPage} />
<Route path="/moversng/dashboard/login" component={AppMoverLogin} />
<Route path="/moversng/dashboard" component={AppDashboard} /> - *Worked*
<Route path="/moversng/dashboard/manage-users" component={AppManageUsers} /> - *Not working*
Question:
Are they conventional ways of route naming against your folder name?
From what I wanted routes, with those naming, the component/page will not render but retained the previous page.
What am I doing wrongly?
Thanks.

Try adding exact to your routes, without it the routes are being considered child routes:
<Route path="/moversng" exact component={AppMoverLandingPage} />
<Route path="/moversng/dashboard/login" exact component={AppMoverLogin} />
<Route path="/moversng/dashboard" exact component={AppDashboard} /
<Route path="/moversng/dashboard/manage-users" exact component={AppManageUsers}/>

try work with exact
for example:
<Route path="/" component={Home} exact/>
<Route path="/about" component={About} />
<Route path="/login" component={Login} />

React - How to forward requests to routes that are not listed in the Router to a NotFound (404) component?

Consider the Router :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
</Switch>
</section>
</Fragment>
</Router>
When the user hits a url like http://localhost:3000/dashboard or any other url from the
listed above , is being forward to the corresponding component.
However when users hit http://localhost:3000/ddlksajldsajk or http://localhost:3000/dashboard1
nothing is being rendered.
How can I forward urls that are not listed to a NotFound component ?

just add <Route component={NoMatch} /> :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
<Route component={NotFound} />
</Switch>
</section>
</Fragment>
</Router>
see react router handling 404 pages

Add a new route like this as the very last route:
<Route path='/' component={my404Component} />
Notice it does not have exact. Anything that hasn't been matched will match with it and send them to the 404.

route redirects to nothing react-router 4 [duplicate]

This question already has answers here:
Route is not matched
(3 answers)
Closed 5 years ago.
I'm not sure why everything is redirecting to a blank page:
I'm using:
"react-router": "^4.2.0",
"react-router-dom": "^4.1.1",
App.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';
class Container extends Component{
render() {
return (
<div>{this.props.children}</div>
);
}
}
export default class App extends Component {
render() {
return (
<BrowserRouter onUpdate={onUpdate}>
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>
</BrowserRouter>
);
}
}
Homepage route to '/' is working fine.
What's not working are all the other routes.
For example when a user clicks a hyperlink that redirects to these routes or other routes other than the default route, I'm getting a blank page:
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
Here is how my routes were working when I was using react-router v3:
<Router history={browserHistory} onUpdate={onUpdate}>
<Route path="/">
<IndexRoute component={HomePageContainer} />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={About} name="about" path="about" />
<Route component={JobList} name="jobs" path="jobs" />
</Route>
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Router>
Note that I also added the new route for companydetail just recently.

All your paths needs to be with respect to to base path i.e. /
Change your router config to
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="/interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="/interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>

Try wrapping your router in an anonymous function.
const App = () => (
<BrowserRouter onUpdate={onUpdate}>
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>
</BrowserRouter>
)