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
Related
I've building a lightweight preact widget that gives users different forms based on current url. I don't want to use preact-router as it would affect the routing of the parent website.
So I went with window.location. But the issue, I'm facing is when users navigate internally from one page to another,unless there is refresh, window.location doesn't update the current URL.
Hence if i want to send form 1 to users at /home and form 2 to users at /settings. Users get the same form for both /home and /settings when users navigate internally and only change when they do a refresh.
Can someone suggest me a lightweight solution to fix this? Does in-memory router works for my use-case?
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
Background Information:
I have been following admin-on-rest example to create my custom Admin app. I created a custom component that is pretty much the same as https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js
However I want to provide the functionality for users to signup within the application, so I added a Sign Up button, that we clicked will redirect to domain.com/signup
Problem:
After reading the Authentication docs and trying it out myself, I found that on each route change the event AUTH_CHECK is evaluated. However, in input params I get as resource something I already defined in my <Admin> component. Basically, I need a way to "whitelist" a path and allow users to navigate to that path without them being authenticated.
Questions:
Is there a way to create a custom signup page and whitelist the path "/signup" so that authentication is not checked?
Is this something I need to implement with custom React Router routes, or is it something at the authClient level?
Has anyone tried to add a new signup page, and how did you make it work?
I am using React and React-router in my SPA. When user navigates from one view to another, URL gets appended with hash (e.g #/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) and this is expected and works fine for all views.
However when user refreshes page on any view, I want React-router to redirect to Index Route irrespective of view the user in. Is there any configuration I can do in React-router to setup this?
Right now React-router tries to navigate to matching route view. I just want to redirect to Index route/index.html without any server side redirects. Any suggestions ?
You can use the replace (or push) function of react-router. Call your history singleton's replace method after you set up the history.
Example
import { hashHistory } from 'react-router';
hashHistory.replace('/');
References
https://github.com/reactjs/react-router/blob/master/docs/API.md