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.
Related
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>
)} />
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>
In my code, I want Header & Footer components to be rendered in all routes except '/login'so how to do that? How to hide component on a specific route?
const AppRouter = () => {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/login" component={Login} /> {/* I wanna render this route without Header & Footer */}
<Route path="/" component={Home} exact />
<Route path="/product" component={ProductOverview} />
<Route path="/profile" component={Profile} />
<Route component={NotFound} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
};
<div className="menubutton">
<NavLink exact to="/assigned"><button>Assigned</button></NavLink>
<NavLink to="/picked"><button>Picked</button></NavLink>
<NavLink to="/completed"><button>Completed</button></NavLink>
</div>
<Switch>
<Route exact path='/assigned' component={ () =><AssignedComponent />} />
<Route exact path='/picked' component={PickingComponent} />
<Route exact path='/completed' component={CompletedComponent} />
</Switch>
</div>
</BrowserRouter>
How to display assigned component on page enters.I am getting after clicking the assigned button.But I need on page enters Please Help me out
You can add a Redirect at the end to redirect to '/assigned'
</BrowserRouter>
<div className="menubutton">
<NavLink exact to="/assigned"><button>Assigned</button></NavLink>
<NavLink to="/picked"><button>Picked</button></NavLink>
<NavLink to="/completed"><button>Completed</button></NavLink>
</div>
<Switch>
<Route exact path='/assigned' component={ () =><AssignedComponent />} />
<Route exact path='/picked' component={PickingComponent} />
<Route exact path='/completed' component={CompletedComponent} />
<Redirect to"/assigned" />
</Switch>
</div>
</BrowserRouter>
You can put the a default route as the last item in the Switch:
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={Users}/>
<Redirect from="/accounts" to="/users"/>
<Route component={NoMatch}/>
</Switch>
(from https://reacttraining.com/react-router/web/api/Switch/Switch-props)
So in your case the last item in the switch would be:
<Route component={AssignedComponent} />
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>