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.
Related
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.
So I'm using React Router v4 on my universal application.
I use StaticRouter for SSR and regular Router for browser.
I create history with browserHistory and pass it over to the router.
So, when I run the application through local port (localhost:8081) the react-router-dom <Link> elements works fine.
The problem is when I try to access the page via a custom local domain which is governed by nginx. I have a reverse proxy there and the redirect itself works fine - when I access a homepage or any other /page, it renders the page just fine.
The problem is that neither the <Link> component and .push functions don't work. They just update the URL but the view isn't re-rendering.
I've read about update blocking, but I don't have any PureComponents that could block the render. Also, it's mindboggling because it seems to work fine when running on localhost:8081.
Am I missing something obvious?
Thank you for all the answers
Try using passing { pure: false } as 4th argument to you connects to see if this makes any change. See troubleshooting section.
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
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