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.
Related
So, I'm trying to create a blog page listing.
If someone clicks a particular blog changing the route to /title/the-title-of-the-blog, and in the route file I have route as,
<Route path='/title/:title' component={BlogMicroSite}/>
it's working fine. But, If I try reaching out /title/some-tile-of-blog directly it's not working. One solution is to use HashRouter but it adds a # to URL which is not SEO friendly at all. Please Help me with some solution without # or how I can remove # in the URL.
I am learning react-router for client-side routing in my basic webpage. I want to know how to refresh the browser once immediately after the route changes.
Is there a way to refresh the browser after the route changes using react-router?
Please do comment for more clarity if needed.
Note: Please provide suggestions for scenarios where react-router v4 is not used and an older version of react-router is used. (Just curious...........XD)
I was also searching for programmatically updating react router and found the best anwser which covers all router versions.
hope you will find this useful
https://stackoverflow.com/a/31079244/8542218
to refresh the page you can simply pass '/' or your home(landing) page route.
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
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
I am pretty new to React-Router, I wonder if there is a simple way to change Route, some concept like state in Angular UI Router. From the React Router official tutorial :
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating
My understanding is: I have to manually change the url to trigger route change.
What exactly are you trying to achieve? Did you take at look at the react-router Link component?
Perhaps the most used component in your app is Link. Its almost identical to the <a/> tag you're used to except that its aware of the Router it was rendered in.
React-Router Tutorial / Lesson 3: Navigating with Link