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
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.
I've been trying to find a straight answer to this and even after searching StackOverflow, I can't find a correct answer for the current version of React.
In my case, I have the following scenario-- the user sets up their data, they post it to the server and within my Save() method, if the save operation is successful, I want to redirect them to the root home page.
Much of the documentation I've found mentions using this.props.history.push(...) to push the new route. However, something has changed with React 4.0.0+ and now history is undefined on the props page.
I am not necessarily interested in pushing the new route to the history object if that is a deprecated way of routing to another page. However, all of the more current examples I've found talk about setting up routes and links within the JSX. That's fine, but I've yet to find a way to programmatically redirect the page un certain code conditions.
Apologies if there is an answer out this already, but I haven't found a straight answer.
The route props are only given to the components that are used for the component or render props of the Route components.
If you want to use the route props in any other component in your app, you need to pass the props manually or use the withRouter HOC.
import { withRouter } from "react-router-dom";
// ...
export default withRouter(MyComponent);
You have to connect this component with router. To connect you have to use withRouter.
export default withStyles(commonModalStyle)(withRouter(connect(mapStateToProps, mapDispatchToProps)(NewOrUpdateModal)));
Please refer this
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.
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
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.