I have a Route who's only job is to display an iframe.
The path changes in the iframe are added to the browser history which allows a user to go back and forward.
Is it possible to enter the Route that contains this iframe without adding to history?
I am thinking something like:
<Route component={MyComponent} onEnter={location.history.pop}>
I am using React Router v4
Related
I am learning HTML, and whenever I execute the href function in HTML and click the blue text, the browser tries to redirect me to a folder inside my computer, when in reality I want to enter a website. For example, if I try to execute the following code, instead of the browser redirecting me to duckduckgo.com, it tries to redirect me to a folder inside my computer:
Browse anonymously and without being traced
How can I solve this issue?
Because href="duckduckgo.com" is using a relative URL, so the browser is looking for duckduckgo.com relative to the current URL that is displaying the page. To the browser it's no different than if you used href="index.html", both are structurally identical.
Instead, use a fully-qualified URL:
Browse anonymously and without being traced
You can also default to the current protocol with this:
Browse anonymously and without being traced
So if the current page is open via http:// or https:// then the link would use the same in the resulting request. Note however that your description of "a folder inside my computer" may somewhat imply that your current protocol could be file://, in which case an inferred protocol clearly wouldn't work. The point is, the structure of a complete URL is pretty versatile so you have options.
I am developing an application using React/Redux. The application reads from a Json file and saves changes back to the json file.
Its a two page application but I am not using any router. All the editing and saving part is done on the second page, where I am hiding the home page.
My problem is that whenever I am saving something it goes back to the home page, which I know is the default behavior as the source is getting updated. So it is re-rendered. I am using different action for the second page rendering.
But what I am looking for is a simple solution for it to stay on the second page where I can show a success message that the data was saved.
"Where you are hiding the home page" - this suggests you are looking for clientside routing, for which react router would be the normal option: https://github.com/ReactTraining/react-router. You can also look into doing it purely with hooks: https://blog.logrocket.com/how-react-hooks-can-replace-react-router/
I have a Checkout page which after a form submission takes you to an Order page. If the user clicks the browser back button on the Order page, then instead of taking them back to the Checkout page I need to redirect them to their Account page. How can I do this with React Router 4?
I found this question but it seems out of date:
Intercept/handle browser's back button in React-router?
I can think of 2 approaches:
1 In Checkout on componentDidMount see if the previous URL was /order. If it is then perform a redirect.
2 In the Order component intercept the back navigation command and instead redirect.
I would prefer option 2 as the behaviour is residing in the component which it will be called from, and the Checkout component does not need to be mounted. However I'm not sure if browsers allow you to edit these things?
You'll need to manipulate the react-router history. You can either use the history library or the Redirect component. This post explains it well: https://tylermcginnis.com/react-router-programmatically-navigate/
I use Polymer starter kit to build my app. I removed the hashbang in the urls.
I am trying to build a login screen and after successful login, I want to change the page to default route. To do this, I have a listener in app.js for successful log in. On successful log in, I change the route which causes page refresh. I tried multiple options:
location = 'entireUrl'
location.pathname = '/route'
location = 'route'
All the options causes page refresh. Is there any way to code this without causing page refresh. Shouldn't page.js catch this and do the routing without page refresh?
For those looking for an answer, I fixed it by calling page.redirect('/route').
note: page.redirect will replace the browser history. If you want to retain browser history you can use page.show('/route')
I'm trying to wrap my head around using HTML5 pushState. It seems to work great. I can add states, go back with my browser and everything looks fine. However, when I refresh the page, it leads to a 404, because the URL that was appended with pushState doesn't actually exist...
I am trying to get everything to load from a single folder with an index.html page, so the URL would look something like http://www.server.com/app_name/<something> (app_name is a folder with an index.html file).
As far as I could gather, hashbang is considered bad, so what pushState URLs can / should I use that will stay on the same actual page and allow me to refresh?
And after refreshing, would I still be able to retrieve the state?
p.s. I am not concerned about browsers without javascript enabled or maintaining backwards compatibility. I do not want to change any .htaccess rules to make this portable and configuration-free.
Your problem is that your web server tries to locate a file called something in your app_name folder. What you must do is route all requests to /app_name/* to your index.html and then set the appropriate application state using the location object of the DOM.
You won't get far without telling the server what it should do. That's the whole point of the History API. If you don't want to mess with .htaccess files you probably should edit the configuration of your web server (Apache?) using mod_rewrite or sth. like that.
I ended up giving up on pushState, and instead used BBQ jQuery plugin.
The code looks something like this:
$(document).ready(function() {
// making sure a hashchange event is triggered for refresh
$(window).trigger('hashchange');
});
// this gets called on any page change, back button etc
$(window).bind( 'hashchange', function(e) {
// the fragment contains a hash value at the
// end of the url, e.g. #xyz
var url = $.param.fragment();
// simulating a click on the appropriate link on the page
// based on the fragment
$('.panel a[href="#' + url + '"]').click()
});
URLs on the page are in this format:
link to xyz