I'm using Vue Router history mode for my Vue.js app. My problem is that, when I try to refresh a page that is not the root page, or enter its URL in the browser address bar, "page not found" 404 is displayed.
Now, in the Vue Router guide they warn about this (see https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), and suggest the solution to "add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in".
With this solution, if I try to access one of my non-root pages (with corresponding URL) through the browser address bar, the root page will be displayed. Is this interpretation correct?
My question: is there a way to achieve the behaviour such that I can access my different pages directly from the browser address bar, and upon refresh stay on the same page?
If you use the aforementioned configuration. Your backend will route all requests to index.html. Then when the Vue-Router is mounted, it will check the URL and provide the corresponding component. The implementation above will work.
Related
I have a next app deployed in aws. I'm having an issue with dynamic nested routes, the issue is that given a route eg. /contacts/[contactId].
On my local env if I go to that route, the page renders correctly, if I refresh it it renders correctly as well.
Now on the server it behaves differently, since going to that route while navigating the site will work as intended but if I refresh the page or try to access it by pasting the url in the browser, the one that will catch the route is the index file inside my pages directory, not the nested route.
Has anyone faced this issue? Thanks in advance.
I am learning vue and firebase.I just deployed my app on netlify server after build.All ok but i try to directly access my site with page name like this is my app To Vue.It have 5 pages signin, signup, home, global, profile and 404. My app open and work correctly when i open home like like https://vuefire-auth.netlify.app but i try to open with page name like https://vuefire-auth.netlify.app/signup netlify give me error.How to handle it?
Thanks in advance.
Create a _redirects file in your project with the following content:
/* /index.html 200
This rule ensures that every path successfully resolves to index.html and the client has full control over the routing logic.
Read article: Creating better, more predictable redirect rules for SPAs
In an ASP.NET Blazor App with Identity I have a page with the page routing
#page "/{PageName}"
When I change the page routing of the login page in Areas/Identity/Pages/Login.cshtml to
#page "/login"
and enter the URL 'localhost:44397/login', the login page shows up as expected.
However, if I follow the link in header bar that I have adapted in LoginDisplay.razor to Log in, the URL changes to 'localhost:44397/login' as expected, but the login page does not appear. Instead, the above page is rendered, where the PageName parameter is set to 'login'.
Endpoint routing obviously works if the URL is entered manually but fails when clicking a link, as if half of the routing middleware would have been bypassed. I tested this with a fresh Blazor template and have no more ideas where to look for the bug.
Accoring to this article, a click on a hyperlink in a Blazor component is intercepted automatically. While the URL in the browser is updated, the request is not sent to the browser but the page is renderd by Blazor. In my case, Blazor can find a suitable page (the one with the #page "/{PageName}" directive) and renders it.
To force loading of the page, NavigationManager can be used:
Login
The href is necessary to render the link with the typical layout. It's probably not the most elegant solution but at least it works.
I have a Gatsby blog. I am writing a set of tutorial posts for coding games in create-react-app. In my Gatsby post markdown, I'm trying to link to the built version of the demo react app for that post hosted on the same server, but Gatsby keeps giving me a 404 page.
I am using nginx. All the contents of the public folder resulting from gatsby build sit in the var/www/html directory of my webserver.
The create-react-app build sits inside var/www/html/tutorials/01/, and has its own index.html file.
In my markdown I have tried both these formats of links: view the code [here](/tutorials/01/) and view the code [here](//165.227.94.249/tutorials/01/).
If you're viewing the post in your browser at //165.227.94.249/posts/tutorial-01 and click on the link, it'll take you to //165.227.94.249/tutorials/01/ but display a 404 page. But if you refresh the browser at the same URL, the working react app will be served.
How do I keep Gatsby from overriding this request and showing a 404 page instead of just letting the web server serve up the index.html file that exists at that url?
The internal links in your markup are automatically converted into Gatsby Link while you build. Gatsby Link is only for internal ressources from the Gatsby build. Your create-react-app app is on the same server but outside the Gatsby build process.
From the documentation:
This component is intended only for links to pages handled by Gatsby.
For links to pages on other domains or pages on the same domain not
handled by the current Gatsby site, use the normal element.
I think using the full URL inside the markup including https might be successful: https://165.227.94.249/tutorials/01/
PS: When I tried I got a connection timeout from your server.
You should try to disable gatsby-plugin-catch-links. In case this doesn't works try to catch the onClick event, cancel the event and trigger your own redirect.
function processExternalSameDomainLink(event) {
window.location.href = url
event.stopPropagation()
event.preventDefault()
return false
}
<a href={newTo} onClick={processExternalSameDomainLink}>
I am using window.history.pushState(name, title, url); to change the browser URL to let the user know what static url corresponds to an application tab pane.
But Meteor reloads the last real URL (the URL we landed on, before pushState) at each application state change (Meteor reactivity).
How do I change the URL without using a Router.go (that's too heavy for what I am doing, just clicking on a application tab).
OK, I figured it out. The whole route was triggered again (so reloading the page) because I called a reactive function in onAfterAction. pushState is fine. Meteor also. Duh. :)