Is there a way I can prevent the url from changing when the back button is clicked?
I'm currently using createMemoryHistory to prevent url modification when I navigate around clicking links set up in my app. By doing this, I'm able to successfully navigate around but when I click the back button in my browser, it modifies the url (which I don't want).
E.g. My url looks like localhost:3000. Then I click on the settings link and I navigate to the settings view but my link is still localhost:3000. Now in settings, I click on Printers and navigate to the Printers view inside settings. My url still looks like localhost:3000. However, if I click the back button and return to the settings page, now my url looks like localhost:3000/settings.
Is there anything . I can do to the prevent the back button from modifying my url? Thank you for your help!
I would suggest using react-router's browserHistory class like this:
import { browserHistory } from 'react-router';
//... inside your component class
componentDidMount() {
browserHistory.listen(location => {
if (location.action === "POP") {
// Do your stuff
// maybe use your `createMemoryHistory` API
// to push a / to the history to keep the URL the same?
}
});
}
Related
I have created a 404 page using nextjs which works without any config and show my custom 404 page.
I have a link in this page which redirects user to another page. On this new page if user click back I want to send them back to the page before 404.
I saw this link but there is nowhere I used router.push.
How can I do this?
page1>404page>page2
by clicking back button on page2 I want to go to page1 not 404page.
Thanks
In order to achieve what you want you can use router.replace.
According to the docs:
Similar to the replace prop in next/link, router.replace will prevent adding a new URL entry into the history stack.
To actually get (and use) the router object, you might use the useRouter object provided with NextJS. Hence, your 404 page might look like this:
import { useRouter } from "next/router";
export default () => {
const router = useRouter();
return (
<div>
<h3>404</h3>
<h2>
Try go here instead:{" "}
<span onClick={() => router.replace("/page2")}>Go page2</span>
</h2>
</div>
);
};
This way, by going to page2, you replace the 404 entry in the history stack by the page2 url which gives the behavior you expect (working example here)
If I type website.com/about-us/ in the address bar it breaks.
Says "Not Found" instead of loading the page
If I type website.com/#!/about-us in the address bar, it goes to the right page. // Added hashbang or #!
If I click a link on the page to website.com/about-us/ (without the hashbang), it works. How do I fix it so I can just go to the website without a hash bang from the address bar?
$locationProvider.html5Mode(true);
Update
Here's my server config
app.route('/').get(index.render); // UPDATE: This is why the home page was loading and I could click links
app.get('/.\*', function (req, res, next) {
if(req.url.substring(0,4) === "/api") {
return next();
} else {
res.send(index.render) // render is a function in the index controller
}
});
TL;DR: link clicks work as expected because your JavaScript has already loaded
Since your using a UI router, link clicks are "told" by Angular to go to the appropriate hashbang route unless you use $locationProvider.html5Mode(true);, which you are. So in this case, link clicks know to use html5Mode because the JavaScript in your page has already loaded.
When you enter the link in the address bar manually, the JavaScript hasn't had a chance to load, so it doesn't "know" to map the appropriate non-hashbang route to the correct view in your app.
To get the desired behavior, you'll need to configure your server to route correctly:
app.get('/some-page', doStuff);
I have an ExtJS (version 4.1.1) application with a single JSP page but multiple screens created using Ext JS components. When I click on the back button in the browser, I want to display the last visited screen within the application, rather than using the browser's default behavior of redirecting to the last visited web page.
How can I achieve this?
You'll want to use the Ext.util.History class, which is designed to track navigation through the browser's "back" and "forward" buttons. The basic idea is that when the user visits a new screen in your application, you call Ext.util.History.add() with an identifier token for that screen. Then, when the user clicks the browser "back" button, a change event is fired with the token of the screen the user has navigated back to, which you would use to re-display that screen in your application.
The ExtJS documentation has a history example showing how this can be done. The key portions of the code look like this:
function onTabChange(tabPanel, tab) {
var newToken;
// ... construct a token for the new tab ...
oldToken = Ext.History.getToken();
if (oldToken === null || oldToken.search(newToken) === -1) {
Ext.History.add(newToken);
}
}
// ...
Ext.History.on('change', function(token) {
if (token) {
// ... set active tab based on token ...
}
});
Using Ext.util.History can often require a lot of boilerplate to set up if there are a lot of screens in your application, so ExtJS 5 added built-in routing to help manage this. There are extensions for ExtJS 4 that are intended to accomplish the same thing, such as Ext.ux.Router by Bruno Tavares.
In my Backbone application, I am opening a modal window that changes the URL.
The application loads at the URL of http://application.dev/#dashboard opening the modal changes the URL but does not trigger a route, the URL is changed too `http://application.dev/#project/create.
On closing the modal I am wanting to navigate back to the last URL, currently I am trying the following,
$('#myModal').on('hidden.bs.modal', function () {
self.remove();
App.Routes.Application.navigate(Backbone.history.location.hash, { trigger: true } );
});
However the last route is not triggered and URL is not changed, I am obviously doing something wrong?
Some possible help:
put self.remove(); after having trigger the rout
Declare pushState:true for your router
I hope it helps.
I'm using the hot towel template, and I'm trying to understand how to navigate to a different view via a javascript call. When my page loads, it looks like this:
Then, if I click any other button, then click the apps button again, I wrote some test code to just take the user to the ping page. This is in the apps view model:
function activate() {
if (initialized) { router.navigateTo("#/ping"); return; }
// more code here (doesn't get hit the second time through)
}
But what happens is the URL is correctly the ping URL, and the ping button is selected, but the actual content is still showing the applications:
If I want to navigate to another page without clicking in the navbar at the top, how should that be done?
Your 'router.navigateTo('#/ping') is correct.
But when activate method is called, lots of heavy tasks are being done by durandal, it's too late for
your commanding, if you want to prevent opening a page and instead of that You'd like to go to
another page , then you can use 'CanActivate' method as following :
function canActivate() {
if (initialized) { router.navigateTo("#/ping"); return false;
/* return false to prevent opening a page */ }
else return true;
}
Also your application's performance will be boosted too
Good luck.