I am wondering if there is a way to have proper access to router via javascript. I need to redirect on certain cases, from pure javascript-based methods where I can not use things like Link components like here.
Right now, I am using a method I created:
navTo(pageHash){
window.location.hash = pageHash; // e.g. "#settings"
window.location.reload(true);
}
But I would like to know if there is another elegant way, e.g. using a router component exposed to the js api.
Related
I have a component in my header that is kind of static on the page. and outside of the <app>.
I would like to know if it is possible for this component to get the router parameters, or if I have to manually check from window.location and split the string with some regex.
The app I work on do not implement some kind of service to get those parameters, so I am asking for an angularjs native way if there is.
I have webapp written using React and React Router.
Are there any pros/cons of using window.location.href to redirect vs using the component provided via react-router?
Use history.push('/page-name') if you don't want the browser window to be reloaded, or window.location.href if you want to reload it. Usually when using the React Router the default behavior is using the history.push (this.props.history.push('/page-name') to be more specific, as the rest of the navigation through the application is already using React Route's <Link>, which has the same effect.
React-Router provides an interface for changing the URL either by modifying history or by using a Redirect component.
The React-Router interface is much more expressive than just manipulating window.location.href. I think the main pro of using React-Router is the added functionality, abstraction, and cleaner interface. Don't know that there are any real performance differences.
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.
Using React Router, what's the best way of pushing a new entry to the history so it updates the URL, but without triggering a new route?
The Navigation.replaceWith() mixin method seems to do the opposite of what I need.
Not really familiar with React-Router's API, but you could use pure javascript to do that.
window.history.pushState({}, '', 'https://stackoverflow.com/new-url-here');
More answers here: Modify the URL without reloading the page
Since backbone does not have its way of doing most things, i am confused on a lot of stuff. One of that things is the right way to navigate through my app.
I realize that a BB Router has a '.navigate' method which can be used to push urls and trigger routes. Now since my app has more than 1 router, i am not sure what the difference is between calling '.navigate' on the one or other router.
This are my Routers
new Etaxi.Routers.System()
new Etaxi.Routers.Header()
new Etaxi.Routers.Videos()
new Etaxi.Routers.News()
Now i could do
router = Etaxi.Routers.System()
// or i could do
router = Etaxi.Routers.Header()
router.navigate(url)
Is there any difference which router i use for my global app navigation? This seems weird to me.
There is no difference in which router you call. In fact, I recommend not calling a specific router, when you have multiple routers. Or, for that matter, don't bother calling a router at all. If you look at the source code for router's navigate method, you'll see that it does nothing more than pass through to Backbone.history.navigate. So just call that directly:
Backbone.history.navigate(url)
http://backbonejs.org/docs/backbone.html#section-114
I use multiple routers in nearly all of my apps, and this is how I call the navigate method. It works great, and avoids the confusion of which router to call.