Develop Reference

React Router with Context

I'm wrapping some private routes with a context, but for some reason it doesn't move to the next route in the switch.
export const Routes = () => (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/seller/:userName" component={userProfile} />
<Route path="/allproducts" component={AllProducts} />
<Route path="/privacy" component={Privacy} />
<Route path="/terms" component={Terms} />
<Route path="/contact" component={Contact} />
<Route path="/about" component={About} />
<Route path="/learnmore" component={LearnMore} />
<Route path="/faq" component={FAQ} />
<PublicRoute path="/login" component={Login} />
<PublicRoute path="/signup" component={SignUp} />
<PublicRoute path="/reset" component={ForgotPassword} />
<PublicRoute path="/resetToken" component={ForgotPasswordToken} />
<PrivateRoute exact path="/userprofile" component={UserDashboard} />
<PrivateRoute exact path="/submitplate" />
// This works but doesn't allow the router to move to the next potential route.
<BasketProvider>
<PrivateRoute exact path="/checkout" component={Checkout} />
</BasketProvider>
// This never gets reached.
<Route component={NoMatchPage} />
</Switch>
);
Just wondering if theres a better way to go around this? Is this bad practice?

Does it work if you do this?
<PrivateRoute exact path="/checkout" component={() => (
<BasketProvider>
<Checkout />
</BasketProvider>
)} />

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>

How to fix an 404 error when directly typing in the url in the browser (react-router-dom)?

I want to let users access specific pages when typing in for example www.page-url.com/about-us instead of going via www.page-url.com and then choose about us in the nav bar. When I type in www.page-url.com/about-us, I get a 404 error (page not found). How can this action be prevented? I have tried different solutions from questions here on SO, but none of them worked.
Router code:
<Router >
<MobileNavbar />
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/om-oss' component={AboutUs} />
<Route path='/sponsorar' component={Sponsor} />
<Route path='/bli-sponsor' component={BecomeSponsor} />
<Route path='/bli-medlem' component={BecomeMember} />
<Route path='/admin' exact component={Admin} />
<Route path='/admin-login' exact component={AdminLogin} />
<Route path="/admin/bytt-passord" exact component={ChangeCreds} />
<Route path="/admin/medlemer" exact component={Members} />
<Route path="/til-foreldre" component={Parents} />
<Route path="/kalendar" component={Calendar} />
<Route path="/admin/kalendar" exact component={AdminCalendar} />
</Switch>
<Footer />
</Router>

When the user types some route which you are not supporting then you can have a catch all Route. Add this at the bottom of your Switch .
<Route path='*'><SomeComponent /></Route>
Catch All Routes

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.