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.
Related
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 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 have this scenario
When web page load I am getting user location. And on basis of that location show some services like A,B,c etc etc.
When user click on service then URL should be go to localhost/3000/Service-name
Any helpful link ?
import Router from "next/router";
....
inside onClick
router.push(pathname :'/service' query:{service-id:service-name},`/service-${service-name})
the pathname is the filename, the query gets the service-names and the third parameter to the router will display how you want the user to see the URL.
in your case, if the user selects Europe option then URL will be displayed as /service-Europe. this work when you are making use of one component to display for all your routes.
if you want to create a unique page then you can specify the pathname explicitly for each service link.
Programmatically navigate using react router
I have some routes within my application. There are some UI changes within a same route. For example, when I click a button, I get resources from the server and display it as a list. I want to mark this point as a separate browser history, so that when the user clicks back from any next route, I am taken back directly to the list instead of the button.
For example,
Route -A > Button is displayed
Upon click,
Route A -> List is displayed
Now when item is clicked
Route B -> Item is displayed.
Now if I click back from Route B, I want to be taken back to Route A with list instead of the button. How can I achieve this?
Any ideas?
I'll assume your app is an SPA (single page application). Routing is then just another way of maintaining application state. Therefore I see two common ways to resolve this:
Create another sub-route for showing list
Implement custom state management. In this case, when you go back to your route you would restore state. Many people will use Redux for global state management, but you are free to set up your own infrastructure.
Either way, you need a way to tell your view that it should render with a state different than the default.
I hope that helps.
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.