How can I conditionally render a nav bar in React Router 5?
so far I've got this in my <Router>
{window.location.href.includes('data-url') ? null : (
<CONNECTED_NAV />
)}
which does work but with one issue. I have a link in my data-url component which redirects back to the app. but once it redirects back and lands on another route /home then the nav bar is still not showing and I've consoled logged in the <Router> component and it's not re-rendering so that's why it's not showing.
is there a better way to force an update? or how to conditionally render a navbar?
If you want your navbar to show up on the /home page only then you have to specify a route:
<Route exact path="/home" component={CONNECTED_NAV} />
This way the navbar will be only visible when the URL matches /home
But if you want to show the navbar conditionaly on the homepage then you can also do that by replacing component with render
<Route exact path="/home" render={() => (condition ? <CONNECTED_NAV /> : null)} />
Route must be wrapped in BrowserRouter if you don't know about these maybe please visit
React Router
Just expanding on #ahmad-nawaz-khan solution
You may still want to pass in the router props from react-router
<Route exact path="/home" render={(routerProps) => (condition ? <CONNECTED_NAV {...routerProps} /> : null)} />
Related
when i click on order button i wanna go to a new page instead o staying on Buying form component and adding orderComplited component down of it
BuyForm.js
App.js
orderCompleted
The issue is that you are rendering your OrderCompleted route as a nested route with the Outlet being rendered by the BuyForm route.
<Route path="order" element={<BuyForm />}>
<Route path="orderCompleted" element={<OrderCompleted />} />
</Route>
The BuyForm component is a layout component. This means the BuyForm component remains on the screen rendered while subroutes are also matched and rendered.
To resolve you should refactor the code a bit. Move the BuyForm component into its own route which will be designated as the index route to be matched and rendered when the layout Route components path matches. Remove the Outlet from BuyForm, one will be rendered by default now by the wrapping Route. Now both the BuyFormandOrderCompletedroutes will be rendered into theOutlet, one at-a-time, when their path`s match.
<Route path="order">
<Route index element={<BuyForm />} />
<Route path="orderCompleted" element={<OrderCompleted />} />
</Route>
Here is the code screenshot.
I want to render Homepage component but I want to wrap it into these MainLayout component.
The problem is that screen is blank and there is no error in Terminal but when I inspect the page it says "Matched leaf route at location "/" does not have an element", so guys I know this is version update syntax problem because I had same problem when I was writing component= {component } but syntax has been changed and I should have written element={<component />}.
So I believe this is also syntax problem but I've done research but couldn't solve. I believe I should change this
/* ... */ render = {() => (
<MainLayout>
<Homepage />
</MainLayout>
)}
somewhat into newer syntax but don't know how.
The Route components in react-router-dom v6 no longer take component or render props; the routed components are rendered on the element prop as JSX.
<Routes>
...
<Route
path="/"
element={(
<MainLayout>
<Homepage />
</MainLayout>
)}
/>
...
</Routes>
I have a simple app where I try to interchange between 2 routes, and for each route there is a specific component to be rendered. Unfortunately, it seems like it remains stuck on the first Route I set inside the Switch.
Here you can access a sandbox containing the simplified app. I have set 2 NavLink components to manage the 2 routes.
in the builer component, you should use path instead to :
<Route path="/checkout" exact render={() => <div>Checkout</div>} />
<Route path="/" exact>
{this.state.showModal ? <div>Modal {orderSummary}</div> : null}
<div>Main Page</div>
{this.state.error ? errorMessage : ingredientControls}
</Route>
I tried it, it's work
In a React application, there is a page with 2 buttons. Each button renders a different component, however, the route/URL doesn't change. How can I change the route, only changing the grey area? and How can I change the state if the user goes directly to the URL?
https://codesandbox.io/embed/elastic-fog-7hqk9?fontsize=14&hidenavigation=1&theme=dark
Yes, you can use Switch, it will render your component in case it matched the URL. Here is an example:
<Container>
<Header /> // this will render in all cases (Fixed here for example)
<Switch>
<Route exact path="/component1" component={Component1} />
<Route exact path="/component2" component={Component2} />
</Switch>
</Container>
I am trying to implement a routing structure where a user goes to another user's page or their own when the path is /:username. I also want to render another page with a path /watch or /watch/ .. Facebook has a similar setup where /:username will take you to your page or another user's and /watch/ for example is a page. Is there best practice to achieve this with react-router?
As of now I have something like this..
<Route path="/" exact component={authenticated ? Home : Index} />
<Route path="/watch/" component={Watch} />
<Route path="/:username" exact component={({match}) => {
if(match.params.username === data.Username) {
return <ProfilePage match={match} />
} else {
return <UserPage match={match} />
}
}} />
Now if I got to /watch/ the profile component is being rendered aswell. So :username is going to match all my routes?
As you already deducted, /:username is matching at the same time as /watch/ because both patterns match the URL /watch/.
Thankfully, React Router provides a <Switch> component for cases like this one, where only the first match is rendered:
<Switch>
<Route path="/watch/" component={Watch} />
<Route path="/:username" component={...} />
</Switch>
Now, with the URL /watch/, only the first route is rendered, even though the second one matches too.
If you are using react-router-dom v6, do these:
instead of Switch, you should use Routes
instead of component={<SomeComponent />} property, use element={<SomeComponent />}
Just in case, you can Read this article about upgrading from v5 to v6