I'm developing an application where I need two kinds of navigation bars. Well, the only thing that is going to be changing are the tabs. I have tried implementing it multiple ways, but nothing worked correctly (The problem is in routing)
Since the navbar gets rendered at top level, it doesn't have access to useRouteMatch url (it does, but it's always /), so I cannot figure out how to route correctly.
Example route:
mypage.com/events/eventId/nested_route1
But when I try to navigate to a different tab, it doesn't work as intended. It either pushes the routes onto each other or just doesn't work in some other way.
But i need just mypage.com/events/eventId as the base url. The navigation used to be in a component with exactly this route, so it worked. But now I need to change the location as specified.
How could I do this? I really have no clue... I could split and pop the url to get rid of the url, but then there'd be a problem if I was on the url mypage.com/events/eventId since it would pop the id.
Hope everything's clear and there's a way to solve my problem.
Related
Asking this here because of an issue that was closed because the maintainer believes this is already a supported use-case of react-router.
My app has four sections that can be switched between by using a sidebar on the left. All sections are rendered at all times, and only one is displayed at a time using a custom screen switcher component. This is also so that state is not lost for sections you have visited.
However, I'm having issues using a singular router for this. When I switch to a different section, the one I was just at loses all its state because it sees I'm at a completely different URL now, so it forgets all the data it's loaded and has to re-load the next time I visit it. (I'm not using a Switch for rendering the sections, since that unmounts them if the route doesn't match. The Switches inside the section do de-activate, though.)
Ideally, when I switch away from a section, that section should remember its path and I just activate another section's router. When switching back, I can re-activate the router and the full path appears in the browser address bar, just as the user left it.
There's a high probability that this use case is not supported by react-router. But in case there is, how would I go about it? Do I really need multiple routers or is there something else I can use?
The maintainer got back to me and clarified that this is definitely already possible. I would use a plain <Router> component and pass a custom history that would only update/listen to browser history changes conditionally.
Edit: I've since successfully implemented this, and it works really well. I can't share any code unfortunately.
I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page.
I've tried
navigate('/temp')
navigate(link, { replace: true })
but it's not working.
The short answer is that you can't refresh the same page using #reach/router (from React, and Gatsby extends from it). This is because the location is the same so for the internal routing, nothing changes hence the refresh is not forced.
The easiest way to achieve it is by using the old-fashioned window.location.reload(). This will refresh the full page, forcing the components to be rendered again.
You can follow this GitHub thread for further information. As you can see, it can be achieved by diving into history.pushState and in other tricky ways but it always ends in a headache, it's not recommended since it's not the purpose of the #reach/router if it thrives will be with multiple caveats.
For standard internal navigation between pages, use <Link> component rather than navigate.
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
I've just implemented React Router 4 in my React/Redux app which was using multiple entry points up to this point.
I changed my code to have a single entry point and set up a catch-all route on the server side so that react router would handle requests on the client side.
Initially, everything seems to work OK but it takes a long long time before the right component is displayed. As soon as I click the link, I see the URL in the browser address bar change immediately but I have to wait sometimes more than 10-15 seconds before the right component is loaded.
I've also noticed that after a click or two, it stops working all together.
I don't get any errors and I put a break point on the server to see if I'm somehow hitting the backend when I click a link but looks like I'm not even going to the backend.
How can I debug/troubleshoot this? React Router is just a bunch of components and there's not much code to speak of that I can debug.
Has anyone experienced this issue? I'd appreciate any ideas you may have. Thanks.
The answer was in this post: React Router v4 not rendering components
Because I'm using Redux, I needed to use withRouter.
Any quick-and-easy answer to the scenario where you want to build something like a simple questionnaire with React and React Router where you don't want the user to be able to modify the URL to browse anywhere and you also don't want to push history state into the browser, essentially preventing use of the back button?
Sample routes might look like:
questions/1
questions/2
questions/3
...so on
But the URL should stay the same at all times and the history won't change, essentially what a single page app without routing would behave like.
For the history part, you would need to use replaceWith() everywhere you want to change route.
If you're using <Link>, you could create your own version which uses replaceWith instead of transitionTo - you should just be able to copy its implementation and replace the PropTypes require call with require('react-router/lib/PropTypes').
I can't immediately think of a non-horrible way to prevent the user from jumping around though - presumably you also want the app to break if they try to start on anything but the base URL? I would just use some simple state to control which component is currently being rendered instead of using React Router if that's the behaviour you really want.