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 have react load Home page and then route to others

I have a basic portfolio app that has the following structure:
App.js
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
When I click on the link to go the production site it only renders the LeftNav, RightNav, and Navbar. I have to click on the Home component to have the Home Screen load.
I then tried putting the Home component outside of to look like:
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Home />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
This is the action I want upon clicking on the link, however then my components don't load. How do I structure this so that the Home component loads up on the initial click and that I'm able to navigate to other pages?

Your first version is good, just add a redirect and change the home path
import React from 'react';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom'; // import Redirect
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/home' exact /> // change the path
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
<Route path="/" exact> // Add the redirect
<Redirect to="/home" />
</Route>
</Switch>
</BrowserRouter>
)
}

You will have to exchange your home path from being the default page:
<Route component={Home} path='/' exact />
to
<Route component={Home} path='/home' exact />
and then add a 'Redirect' to your App.js :
<Route path="/" exact>
<Redirect to="/home" />
</Route>

How to hide my NavigationBar Component when on certain paths

Been looking around for a fix, can't seem to find something that works here, I've tried using the match tag to match it to a certain page, but it isn't working correctly. pretty lost here.
return (
<React.Fragment>
<Router>
{/* <NavigationBar /> PLACE PREFERRED NAVIGATION IN LINE BELOW */}
<NavigationBar />
<AuthProvider>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup} />
<PrivateRoute exact path="/home" component={Home} />
<PrivateRoute exact path="/map" component={MapPage} />
<PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/feedback" component={Feedback} />
<PrivateRoute exact path="/about" component={About} />
<PrivateRoute exact path="/resources" component={Resources} />
<PrivateRoute exact path="/academic" component={Academic} />
<PrivateRoute exact path="/career" component={Career} />
<PrivateRoute exact path="/financial" component={Financial} />
<PrivateRoute exact path="/physical" component={Physical} />
<PrivateRoute exact path="/psycho" component={Psycho} />
<PrivateRoute exact path="/social" component={Social} />
<PrivateRoute exact path="/spiritual" component={Spiritual} />
<PrivateRoute exact path="/badges" component={Badges} />
<Route exact path="/404" component={NotFoundPage} />
<Route exact path="/underConstruction" component={pageUnderConstruction} />
<Redirect to="/404" />
</Switch>
</AuthProvider>
</Router>
</React.Fragment>
)

I think you can use the useLocation hook by react router Dom.
You would import the hook: import { useLocation } from 'react-router-dom';
const location = useLocation()
Then in the component you want style={{ display: location.pathname === '/' ? 'none' : 'block' }}

Updated
Here is solution:
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
{allowedRoutesNavbarToShow.includes(history.location.pathname) && (
<Navbar />
)}
To update the browser history do following steps:
<Route path="/" exact component={Something} />
Something.js
export default function Something(props) {
function handleClick() {
props.history.push("/somewhere");
}
return (
<button onClick={handleClick}>Go to Somewhere</button>
);
}
Visit to see full code and live working solution:
Codesandbox
Happy coding :)

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.

How to perform dynamic component rendering using react router v4?

I have an application with a Login page followed by a Dashboard page. The routes that I've defined in the index.js are like this:
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
Dashboard.js:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
);
The Dashboard component is rendering 3 of its child components. Header, Footer and Content1. I want the Dashboard component to render Content1 by default (i.e. when the url is /dashboard) and also when the url is /dashboard/content1, and should render content2 when the url is /dashboard/content2. Header & Footer components should remain. Please suggest the configuration for the Dashboard component to achieve the same.

In React-router v4 you provide Routes within the component, so you can write your Routes as follows
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
and then in the Dashboard Component render method
render() {
return (
<div>
{/* other content */}
<Switch>
<Route exact path="/dashboard" component={content1} />
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
)
}

As a variant of an answer to your post before you have edited it, you can do it (nesting) like this:
<Router>
<Header/>
<Content1/>
<Footer/>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/dashboard/content1" component={content1} />
<Route exact path="/dashboard/content2" component={content2} />
</Switch>
</Router>

React-Router's Switch component renders the first thing that matches,
so if you put a route without a path last, it will render that if no other routes match, essentially treating it as a default. Like so:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Route component={Content1} />
</Switch>
</div>
);
I have found that rendering a component instead of a Route also works, although I dont know if it's officially supported.
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Content1 />
</Switch>
</div>
);