In my view I render collection and I have sort buttons.
When sort button is clicked then collection is fetched with some custom query param (like &sort=id+desc). It works but I would like to also change url querystring to this query param (&sort=id+desc). The problem is that it works but it re-renders whole view as router just redirects to different action (actually the same action but with different query params).
How I can just change url query param without reloading view and also add it to history?
I am using pushState in my app
You should use backbone router for this.
When application stars you need to run:
Backbone.history.start({pushState: true});
To change the URL just use you router:
router.navigate("something?key=value");
If you don't have a router you just create one:
var router = new Backbone.Router();
Related
I am building a React Redux application and I am using <Prompt/> from react-router-dom to prevent a user from navigating away from a page when a specific icon is being rendered on the page.
It works fine except for when the params in the url change and then it fires the <Prompt/> when I don't want it to fire because I haven't actually tried to navigate anywhere. My url looks like:
http://localhost:8080/#/path/im/on?ids=1%2C24&from=1512518400000&searchRequest=e0007&to=1512604799000
When the ids in the url become successful, they are removed from the url but <Prompt/> is still fired.
Is there any way I can prevent <Prompt/> from firing when the url params change and the first part of the url stays the same? i.e. http://localhost:8080/#/path/im/on
Not sure if this is still relevant to you but you can do the following:
'message' prop in the Prompt component can either be a string or a function that returns a string or boolean.
<Prompt
message={(location) => {
return location.pathname.startsWith("your url")
? true
: `Are you sure you want to go to ${location.pathname}?`
}}
/>
if a function is passed to message prop then it will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.
here is the documentation link: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Prompt.md
I'm trying to get my search bar working correctly.
When making a search, router sends me to /list/(whatever I searched for)
The searchbar is changing my route programmatically like so:
var pathname = '/list/';
var query = {
q: this.state.searchBar
};
hashHistory.push({pathname, query});
/list/:q has a componentDidMount function that sends a GET request to a database, but if I make a new search while allready on '/list/:q' the url gets updated but the component is not reloaded.
My problem:
How can I force my component to reload when making a new search while already on the search route /'list/:q'?
Relevant code:
Pastebin link
As Paul S suggested, using componentWillReceiveProps solved my problem.
I have an application which searches for some items and on finding them opensup a react application in new window with some params that are item specific.Now once i have my react application opened up in new window.I want to pass those params in the url throughout my application.
I searched for it but nothing helped.
Here is an example of my scenario :
Url with which I am opening the react application :http://localhost:3000/dashboard?instrumentId=75064&username=XYZ&appleturl=http%3A%2F%2Flxsdfeat1.global.abcecorp.net%3A7950%2FrmsDPPortal%2Fresources%2Fsapplauncher.jar&dsfhosturl=http%3A%2F%2Flxbeat1.global.bcecorp.net%3A7950%2FrmsasdfPortal
I want everything after 'dashboard' to be part of all the urls in my application.so that i can extract url,usernames in all the pages and make api requests using them.
Note: I am using react router for routing purpose
I passed that common url in this way and it works for my use case.
browserHistory.push(
{
pathname : "/calsummary",
search : searchParams
});
//or
browserHistory.push(
{
pathname : "/calsummary",
search : location.search//location object is which is available on window object,window.location
});
I want to change the state and then trigger the reload/refresh at that particular state using ui-router i had tried location.href previously but it seems that if there is hashbang then it doesn't reload the whole page ,but i want to reload the page
this.$state.go(this.$state.params.returnUrl, {}, {reload: true});
i had tried the above code but not working for me ,where returnurl is the state where i want to take the state to.
$state.go doesn't reload the whole page, even with reload option set to true.
To reload the page you can get result url using $state.href, and reload the page with window.location
// get state's relative url with populated params
// if you want to get absolute url, then you can add {absolute:true} param
window.location.href = $state.href('state.name', {param: 'value'});
// reload the page
window.location.reload();
Please provide some more code to identify the issue. Have you injected $state to your controller? I've used this approach before and it has worked.
I am new to backbone.js, pardon me if the question seems silly.
I am routing to other pages using :
this.options.app.navigate( myNewURL, true);
this myNewURL gets appended to the current URL in the window but before doing that i want to make some checks on it.How do i fetch the current url and then append the newUrl to it and redirect?
eg:
current url : abc.com/firstString/SecondString
on navigation i want : abc.com/SecongString/myNewUrl
this firstString might or might not exist, so i have to make a check for it and remove it before redirection.
How can that be done?
The way I prefer navigation in Backbone.
Backbone.history.navigate('myNewUrl',{trigger:true}); //This will fire the router
Make trigger false to just change the route, but not execute the router.
In order to get the current url, you can use
Backbone.history.fragment();
References :
http://backbonejs.org/docs/backbone.html