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 :)
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>
I am trying to access the FolderDetail component once the url /folders/xy is called. Instead of getting FolderDetail component I always get the Folders component which lies in /folders... Please help.
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route path="/" component={Home} exact />
<Route path="/folders" component={Folders} />
<Route path="/folders/:id" component={FolderDetail} />
<Route path="/login" component={Login} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
You should add exact to all Routes components, this is a working codesandbox :
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/folders" component={Folders} />
<Route exact path="/folders/:id" component={FolderDetail} />
</Switch>
</div>
</BrowserRouter>
);
};
A switch takes the firs matched route so you need to reorder your routes like this, (also add exact)
<Switch>
<Route exact path="/folders/:id" component={FolderDetail} />
<Route exact path="/folders" component={Folders} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Home} exact />
</Switch>
Always put the more specific routes first.
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 can I make Reacts Suspense not show any fallback but rather stay on the same page
This what I have
return (
<Router>
<Provider store={store}>
<Fragment>
<Switch>
<Layout>
<Suspense fallback={<BusyIndicator />} maxDuration={5000}>
<PrivateRoute
exact
path="/en/account/dashboard"
component={Home}
/>
<PrivateRoute exact path="/en/books" component={Books} />
<PrivateRoute
exact
path="/en/account/quiz"
component={Quiz}
/>
<PrivateRoute
exact
path="/en/account/quiz/:slug"
component={QuizDetail}
/>
<PrivateRoute
exact
path="/en/account/quiz/:slug/result"
component={QuizResult}
/>
<PrivateRoute
exact
path="/en/account/my-books"
component={MyBooks}
/>
<PrivateRoute
exact
path="/en/account/logout"
component={Logout}
/>
<RedirectRoute
exact
path="/en/register"
component={Register}
/>
<RedirectRoute exact path="/en/login" component={Login} />
</Suspense>
</Layout>
<Route component={NoMatch} />
</Switch>
</Fragment>
</Provider>
</Router>
);
What I want is for the page to render the same component it is on until it has fetched the next chunk, maybe with a top progress bar like youtube
#NduJay I think what you are looking for is a resolver. See https://www.npmjs.com/package/react-resolver
Basically the concept is that the next component won't render until the data requirements to show it have been met.