I am developing an app in NativeScript with Angular
When I want to navigate to another route I simply programmatically declare:
this.router.navigate(['/my-details']);
However, when I am on the my-details route and I want to refresh the route.
I have tried calling the route again with the same method as above, as adding a parameter to the route such as /refresh, but they both do not work.
How do I refresh/navigate to the current route?
Couldn't you just use pullToRefresh? Although you have a detail view and not a list view it is possible to implement it there: https://github.com/bradmartin/nativescript-pulltorefresh#html
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'm trying to redirect non-matching urls to a specific route using React-Router. For example, if user navigates to https://www.mysite/com/no-match and I don't have a corresponding route set up, it should push them to https://www.mysite/com/home.
I'm sure there's a way to do this but can't find it in docs.
For any AngularJS folks, this would be equivalent to $urlRouterProvider.otherwise('/home')
Any advice is appreciated!
There is a subcomponent of React Router that is perfect for this. You're looking for the Redirect component: Redirect Docs.
You can place this as a child to the route that you want to redirect and it should take care of this functionality for you.
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
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.
I need to change some URL variables without page reload, I have set the $routeParams's value but this doesn't change in the navigation bar.
Does someone can help me ?
I'm not aware of a pure angular way to do this, but Angular UI Router allows you to assign urls to states and when you transition between states, it will rewrite the URL without a page reload.