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.
Related
I need to add a chat in my nextjs application and I decided to manage it like twitter. You actually can navigate in your chat from the dashboard and then you can choose between your chats by clicking them and next to the list there opens the actual chat.
I think they use nested routes or something like that because you go from /messages to /messages/{id} without actually go to a new path.
What I need is on click of the chat I don't want to go to a new route, but I need to load the chat component and set the pathname from ´/messages´ to /messages/{id}. This is necessary to keep it open in case of refresh of the page. So is there a way to do that in nextjs? Pushing it to a new route implies to duplicate code which is not a good thing, because I would need to keep all the components that are also in /messages plus the chat component.
You can use dynamic routes and optional catch all routes (https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes)
For example, you can create a "messages" folder inside "pages", and create a [[...id]] document (the param inside double brackets is optional).
This way you will be able to have a messages route that may have an id param or not.
And, inside a useEffect for example, once you have fetched your discussions, you can use next router to push your "messages" route with a discussion id and then navigate how you want to.
I am working on a React project where I have created a AlertsTable component which renders a paginated table with a PaginatedButton component that has links to URLs with different pages for table. But those links only change URL in browser URL bar but views remain the same until I manually hit reload button of browser. I searched up a bit, one solution was that Link component in Pagina tedButton component should be between Router component. Plus, it was also suggested that only one Router should be there in whole App so does it mean i would then have to remove Router from App.js? Which I am sure would make matters worse? I have also used the withRouter as per suggestion to get query parameter in AlertsTable component, i have got query parameter value now but view is not being updated.
I have removed the original API server URL due to obvious reasons so code sandbox doesn't display anything, but once i replaced URL with original URL in componentDidMount method in ALertsTable, it works. So code is legit.
stripped down code here
I have a problem with my react web app.
I have Multiple components : Home, Login, Header, Footer
I do a GET request in Header to retrieve categories from API and list it in the Header menu.
The problem is when i click on link (to go in Login or Home page), the request in Header is sent again because Header component is include in Home and in Login component.
Someone have a solution for that ?
Thanks in advance :)
check out using a router, such as React Router, to handle multiple pages without reloading layout stuff like your Header.
alternatively, you might want some caching to not hit the API every time your component renders
I'm creating a data fill in page, and I want to ask users to confirm that they want to leave the page. I see that react router provides an onLeave function with no arguments, but I don't see how to use it in the way I need.
Thanks
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.