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 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

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

React Router 4 - Different Layouts?

I know this is been asked a few times, but nothing really seemed to apply to me.
I have this
App.js
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route exact path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment >
In members area component I have
// other html above here
<div className="main-area">
<main>
<Switch>
<Route path="/members/home" component={HomeComponent} />
</Switch>
</main>
</div>
NonMemberAreaComponent
<div className="non-members-area-container">
<Route path="/login" component={LoginComponent} />
<Route path="/" component={NonMemberHomeComponent} />
</div>
When I try to do /Login I keep getting my "NotFoundComponent". I think it is "exact" what is messing everything up.

Your second Route only matches when the path is exactly /. Remove the exact prop to make it active when / is just a part of the path.
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment>

reactjs - 404 page - and language param missing handling issues

I am new to reactjs - working on a site with a language switch I am trying to create an error component to use as a 404 page - but also trying to see how to configure/automatically switch the site to use a default language if the parameter is not defined or to set the error path to still listen out for the lang param.
router.js currently looks like this
<Switch>
<Route exact path='/' render={() => (<Redirect to='/de/dienstleistungen/geistiges-eigentum' />)} />
<Route path='/:langURL/services' component={Services} />
<Route path='/:langURL/dienstleistungen' component={Services} />
<Route path='/services' component={Services} />
<Route path='/:langURL/how-it-works' component={HowItWorks} />
<Route path='/:langURL/anleitung' component={HowItWorks} />
<Route path='/:langURL/features' component={Features} />
<Route path='/:langURL/funktionen' component={Features} />
<Route path='/:langURL/beliebte-projekte' component={BundleDetails} />
<Route path='/:langURL/popular-projects' component={BundleDetails} />
<Route component={Error} />
</Switch>

I think you're saying the problem is that you want the user to be able to not provide the language parameter in the URL? And that right now if they don't provide it they're thrown into the Error component? You can make that parameter optional by using :langURL?:
<Switch>
<Route exact path='/' render={() => (<Redirect to='/de/dienstleistungen/geistiges-eigentum' />)} />
<Route path='/:langURL?/services' component={Services} />
<Route path='/:langURL?/dienstleistungen' component={Services} />
<Route path='/services' component={Services} />
<Route path='/:langURL?/how-it-works' component={HowItWorks} />
<Route path='/:langURL?/anleitung' component={HowItWorks} />
<Route path='/:langURL?/features' component={Features} />
<Route path='/:langURL?/funktionen' component={Features} />
<Route path='/:langURL?/beliebte-projekte' component={BundleDetails} />
<Route path='/:langURL?/popular-projects' component={BundleDetails} />
<Route component={Error} />
</Switch>