I have a route I want to be able to navigate in series.
Unfortunately Backbone doesn't make it possible to navigate the same route twice.
Is it possible not to save this route to the history?
I have this route:
app_router.on('route:deleteFile', function(filename){
var r=confirm("Do you really want to delete "+filename);
if (r==true)
{
//delete instruction
}
});
If I don't accept the confirm by mistake, I can't choose the same file to delete again.
Because the route is already reached.
One solution consist of navigating to the previous route when you don't accept the confirm, without triggering it :
app_router.on('route:deleteFile', function(filename){
var r=confirm("Do you really want to delete "+filename);
if (r==true)
{
//delete instruction
}
else
{
Backbone.history.navigate(/* previous rout */, {trigger: false});
}
});
Related
I am creating a react/Gatsby website and am trying to get the navigation working an need some guidance
So basically I have a site on a domain like: https//mysite.com
When navigating in the site my route gets added to the domain, like so: https//mysite.com/page1,
https//mysite.com/page2 etc.
When I refresh the browser I want the site to reload the website to its origional state, ie, https//mysite.com.
When I do reload from /page2, for example, the site seems to remember the last position. So on a reload I still have https//mysite.com/page2 in the address bar, whereas I want the site to go to the home page.
Is this possible?
Thanks
See this question for how to detect a page reload (such as pressing F5). The second most upvoted answer recommends this code for detecting the refresh and triggering another function:
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Gatsby uses #reach/router under the hood. So use Gatsby Link to redirect to your root page:
import { navigate } from "gatsby"
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
navigate("/"); // redirect to your root page here
}
The user will be able to go back to the previous page. If you don't want this you replace the history like this:
navigate("/", { replace: true });
I'm using react-router-dom for routing in my reactjs app. And i want to prevent user from going back after login i.e i don't want to user go back again on login screen when he hit back button on browser after login.
Using componentDidUpdate method of React page lifecycle, you can handled or disabled go back functionality in browser. basically componentDidUpdate method will call automatocally when component got updated. so once your component is updated you can prevent to go back as below.
componentDidUpdate() {
window.history.pushState(null, document.title, window.location.href);
window.addEventListener('popstate', function(event) {
window.history.pushState(null, document.title, window.location.href);
});
}
This will prevent to user go back and uses the current page as a refernce for history object . so incase of user even click on back button of browser, they can not go backword in the last page.
You can checkout this codesandbox example may be that will help you or someone who is looking for the same.In this we can prevent the user to go back to previous page,For more detail checkout this medium article. here is small part of the code
componentDidMount() {
const { history } = this.props;
window.addEventListener("popstate", () => {
history.go(1);
});
}
for full working example click on this link.
Are you using redux? other wise you can add something on your render that checks if the user is already logged in it redirects him back to the page he was like:
import { Redirect } from 'react-router'
render(){
//I store my user JWT on this.props.currentUser redux state
this.props.currentUser && <Redirect to={'whatever page you want'} />
//OR you can also, if you have history, history.goBack()
So instead of forbidding going back, you forbid the user to ever going to the login page while logged in, it redirects him somewhere or back to where he was
window.addEventListener('popstate', function(event) {
});
use this function this will read your browser back button click event and after that whatever condition you want you can apply
:)
I'm trying to reload browser (with location.reload();) if user click in <Link> for the the same path, where it already.
Example:
I have a menu:
- Home
- Contact
- About
When user click in 'Contact', he go to '/contact'. But I he already in '/contact' and click in 'Contact' in menu, the page reload.
It's possible to do this?
What I'm trying:
<Link onClick={this.handleClick} to="contact">Contact</link>
handleClick(){
var currentRoute = 'React-Route path';
var linkRoute = 'link path';
if (currentRoute === linkRoute)
location.reload();
} else {
//do default transition
}
}
But I don't figure what I need to declare in 'currentRoute' and 'linkRoute'. :(
You shouldn't reload the page. Thats a really bad idea. Instead disable the link like this:
if you are on the home page your links would look like this
home
contact
about
Then in your handleClick() function you can just do this.
handleClick(e){
e.preventDefault();
var disabled = $(e.currentTarget).data('disabled');
if (!disabled){
//do redirect
}
}
Basically have a data attribute on the link that specifies if it is disabled or not (only disabled if its on the current page) and then only redirect if its on a different page
Reloading the page on the exact same page will cause you to lose all state and process that the user has done, which doesn't need to happen. It also reduces traffic on your server for a new page load (aka any data you need to load on the page load you don't have to do again).
You can use window.location.href to get the current URL. Then you can do your comparison.
I have a service in which inside I bind a click event:
$('button').click(function() {
alert('Clicked');
return false;
});
The issue is when I do not start at the default "/" route (i.e. "/testroute"), then that same button when clicked, causes the page url to go to "/" and not fire my event at all. When I click on it again after the route changes to "/", the event triggers as normal. How do I make it such that if I were to start at /testroute (even though it has the same view, different controller, but shares the same service, the alert will fire?
Use locationChangeStart. Also read the link Andrey posted.
$rootScope.$on('$locationChangeStart', function(e) {
e.preventDefault();
});
You might want to use these events to prevent route changing.
I have a router defined somewhat similar to the following (greatly simplified for demo purposes here):
var MyRouter = Backbone.Router.extend({
routes: {
'': 'search',
'directions': 'directions',
'map': 'map'
},
search: function () {
// do something
},
directions: function () {
// do something
},
map: function () {
// do something
},
initialize: function () {
this.listenTo(myModel, 'change', this.updateNavigation);
Backbone.history.start({ pushState:true });
},
updateNavigation: function () {
var selected = myModel.get('selected');
this.navigate(selected);
}
});
The history entries are all getting created properly by the updateNavigation call, and when I hit the back-button to go back through the history I've generated, the routes fire for each of the entries, that is until I get to the initial entry. At that point, even though the url has updated with that history entry, the route that should interpret the url at that point does not fire. Any idea what might be going on here? Am I making some bad assumptions about how history works?
EDIT:
It seems I get inconsistent results - it's not always just the initial entry that doesn't execute, it's sometimes anything after the first time I've went back one through history. That is, I click the back-button once, the url changes, the routes fire properly. I hit it again, the url changes, the routes don't fire. It smacks of me doing something wrong, but I haven't a clue.
Don't ask me why, but my browser back button doesn't seem to function properly when I don't trigger: true on #navigate.
My very brief assumption is that Backbone.history.start({ pushState:true }); used in wrong place.
As far as I know, backbone history start should be after the router instance is created. Like,
var router = new MyRouter();
Backbone.history.start({ pushState:true });
I've discovered the problem. I was using a querystring and updating the querystring based on actions within the application. Each time I modified the querystring, I added another history entry, but the actual route parts of the history entry didn't always change. Backbone won't do do anything different based on the same route but with different querystring, so I had to abandon using the querystring and just make restful urls instead. Once I did that, the history worked fine.