I'd like to implement a page internal to my application that appears when the blazor router is unable to find a matching route. Currently, all requests are routing to index.html so I'm unable to handle errors through iis as I may normally. If I enter an invalid route, I will be shown a blank page (which is actually index.html) and receive a console error:
'Router' cannot find any component with a route for '/some/Nonexistent/Route'.
It seems like I should be able to handle this since the blazor router is able to recognize that there is no route defined which matches the requested route however I've so far been unable to find any documentation on this.
How can I implement this? Is there a way to hook into the blazor router and direct all non found routes to a predefined error route?
I see https://github.com/aspnet/AspNetCore/issues/5489 has an issue listed for a 404 handler however I'm not sure if that is for something more robust and production ready than what I'm looking to do
In App.razor, add the <NotFound> element under <Router> and set what content you'd like to be displayed when Blazor can't find the specified route.
For example:
<Router AppAssembly="#typeof(Program).Assembly">
<NotFound>
<h1>404 Not Found</h1>
</NotFound>
</Router>
(Note: If it's a server side app, then it would be #typeof(Startup).Assembly)
Source
Try this:
App.cshtml
<Router AppAssembly=typeof(Program).Assembly FallbackComponent="typeof(Error404)" >
Create a Component named Error404.cshtml
Note: This is only a guess I gathered from digging the Router class. See https://github.com/aspnet/AspNetCore/blob/343208331d9ebbb3a67880133f4139bee2cb1c71/src/Components/src/Microsoft.AspNetCore.Components/Routing/Router.cs
Please, let me know if it works for you.
For SEO enough add in App.razor:
<NotFound>
<h1>404 Not Found</h1>
<HeadContent>
<meta name="robots" content="noindex" />
</HeadContent>
</NotFound>
and implement Sitemap.xml
You can use this link for .net 5.0 blazor server-side application.
You can handle 404 and status code correct
https://stackoverflow.com/a/69404900/2123797
Related
I am not VueJS programmer, but I work with in a company where we developing a VueJS website.
The website have articles. The URL is something like this:
http://example.com/here_is_news_from_sofia.htm
However if you type:
http://example.com/here_is_news_from_blabla.htm
You should go to 404 page.
I inspected several websites and stackoverflow questions, they explain how you should do catch-all router etc, so finally you get a page with "404 Not Found" text on it.
However, in ALL cases, the HTTP code send to the client is not 404, but 200.
With my team, I elaborated this:
When you go to any article, you get something like this:
<html>
<body>
<div id="app">
<app />
</div>
<script src="/js/client.js"></script>
</body>
</html>
Of course, if you click on a link, this page remains and everything is loaded via JS dynamically.
Then lets suppose article is not found.
VueJS will be able to show "404 Not Found" as text, but because HTTP headers are already send (HTML page is already loaded), it will not be able to send 404 code to the client.
For the same reason, VueJS can not send 301 code redirect to the client.
VueJS can incorrectly change the URL in the browser to "http://example.com/404.htm" - this is NOT a correct solution for search engines, since this is purely client-side (in-browser) "trick".
The other think it can do is to execute fancy redirect, as shown here Vue-router redirect on page not found (404) :
Vue.component("page-not-found", {
template: "",
created: function() {
// Redirect outside the app using plain old javascript
window.location.href = "/404.htm";
}
}
This will make the browser to reload the /404.htm page from the server and if the server (Apache / Nginx) is configured correctly, it will send "correct" 404 code to the client.
However I don't think Google and MSN will recognize that http://example.com/here_is_news_from_blabla.htm is a 404 page.
Am I missing anything?
Is there another way VueJS might handle this situation?
How VueJS websites gets indexed from search engines like Google and MSN?
Off topic bonus question - can VueJS generate visible HTML code that contains the article?
If that's a single page application, you can set up dynamic route matching with parameters with vue-router. And dynamically update your meta tags with javascript. I am using quasar vue framework, which handles all of this SEO feature.
I added slug data to the article saved in the database and use it as a route parameter.
https://quasar.dev/vue-composables/use-meta
https://router.vuejs.org/guide/essentials/dynamic-matching.html
You can use quasar vue framework, develop vue app in SSR mode and deploy it to the server.
https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors
In Blazor, we can directly assign the route to each page on the razor itself. (that's the fun part doing) but I want to navigate to "/error" or "/404" page when any non-existing url is entered. Please Help me how we can get 404 status and implement the redirection. as it is an important task for SEO purpose.
ive tried many solutions: 1: i have created a component "error.razor" and added that component in app.razor inside the notfound section. in this scenario i am getting a 200 status code with same non-existing url in address bar
2: for a forceful redirection, i have injected NavigationManager in the "error.razor", with the help of NavigationManager i am redirecting it to 404 page. and i.e. a 302 redirection.
Edit: I am trying to get 400 status code on non-existing page. but i am getting 200. how can i get proper 400 error status in network panel. Help me on that.
FYR :
Correct url
Damaged Url/Non Existing URL
help me out if you have any solution.
You can write a custom NotFoundPage component that will display what you want the user to see when they navigate to a page that does not exist and put it under NotFound Context in app.razor
<Router>
<NotFound>
<CascadingAuthenticationState>
<NotFoundPage></NotFoundPage>
</CascadingAuthenticationState>
<NotFound>
</Router>
Right now I have it at the bottom of the _Layout.cshtml layout page that is used by every other page. The problem I'm having is that pages under the Identity area throw errors in the console when navigating to Identity pages:
POST https://localhost:5001/Identity/Account/_blazor/negotiate 404
and
blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
These errors make me think I'm doing something wrong with how I enable Blazor Server in my RazorPages app.
So I'm wondering, should I only have the blazor.server.js scripts on pages that are actually using Blazor? Is there a way to make it available to Areas that putting it in the Layout seems to not do?
I believe this post answers my question:
How do I use blazor server-side inside a razor component library using areas?
By default, the SignalR service uses a relative path and was unable to find the _blazor/negotiate endpoint within an Area. The suggested code change in _Layout will make it use absolute paths and normalize to /_blazor/negotiate wherever you are in the page structure.
I know this is late but incase it help others.
I got this error when I was trying to add blazor to my existing app.
I added:
<base href="~/" />
at the end of the head tag of the _layout.cshtml file found in the shared folder.
enter image description here
I have a single page Vue application that uses hash history for the URLs (i.e. https://www.myapp.com/#/sign-up). I have another website that is using Wagtail as a CMS tool that is attempting to link to my vue spa using an anchor tag but it doesn't appear to be working. The website with the anchor tag was built with a pre-made theme using jQuery.
<a class="btn btn-sm btn-primary transition-3d-hover" href="https://www.myapp.com/#/sign-up">
I expect clicking the link will take me to my sign-up page but nothing happens, I see this on the console log when clicking the link:
Uncaught Error: Syntax error, unrecognized expression: #/sign-up
at Function.oe.error (jquery.min.a2530ed98bf8.js:2)
at oe.tokenize (jquery.min.a2530ed98bf8.js:2)
at oe.select (jquery.min.a2530ed98bf8.js:2)
at Function.oe (jquery.min.a2530ed98bf8.js:2)
at Function.e.find (jquery-migrate.min.05689c22f0c8.js:59)
at w.fn.init.find (jquery.min.a2530ed98bf8.js:2)
at e.fn.init.w.fn.init (jquery.min.a2530ed98bf8.js:2)
at new e.fn.init (jquery-migrate.min.05689c22f0c8.js:43)
at w (jquery.min.a2530ed98bf8.js:2)
at HTMLAnchorElement.<anonymous> (scroll-nav.787831ada42e.js:16)
Navigating to the url https://www.myapp.com/#/sign-up does work as expected, just not through clicking the link. I'm relatively new to front-end development and am lost on what could be causing the problem.
I am not that clear about the question and maybe not the best person to answer, but typically you need to configure your server with a URL Rewrite to be able to work with an SPA application, but if that was the issue you wouldn't be able to open that url directly either but you say that you can. So I am not sure what the issue is. I suggest that you take a look at this link also related to configuring the server.
Don't use hashbang navigation as it's deprecated since 2015. Instead use VueRouter to get rid of your hashbang and configure your server-side app to redirect all routes to /, letting Vue handling the routes.
const router = new VueRouter({
mode: 'history'
})
Thanks to Thomas Edwards line of questioning it lead me to the answer:
The website attempting to link to my SPA indeed had some jQuery code on it for autoscrolling behavior where the function was preventing default behavior for all hashed links.
I currently develop an SPA web application using nuxt 2.7.1 as part of my bachelor's thesis.
On some of my pages I have set up beforeRouteEnter navigation guards to check whether a user may access the page. If not, I want to redirect the user to a dynamic route (namely /info/1).
When accessing the page protected by the navigation guard, Nuxt displays an error page stating This page could not be found, although the URL is correct and a simple reload at the error page correctly leads me to the dynamic route.
I am currently using the navigation guard in the following way:
beforeRouteEnter(to, from, next) {
if (!isValidAccess()) {
console.warn("illegal access");
next(`/info/1`);
} else next();
}
For clarification, my directory structure looks as follows:
pages
|__ info
| |__ _index.vue (redirect target)
|__ shop
|__ _index.vue (with navigation guard)
I have tried experimenting with the argument passed to next() but so far without success. When implementing another beforeRouteEnter in the target route and logging the to parameter, everything seems normal.
I hope you guys can help me. I already spent too much time on this issue.
Best regards
EDIT:
I have created a minimal example, where the routing to a dynamic route works without problems... https://codesandbox.io/embed/codesandboxnuxt-t1d0e
I will update the question when I find the solution to my problem.
This works for me - on landing page (index) you get redirected to your /info/1 dynamic route. Is this what you want?
https://codesandbox.io/embed/codesandboxnuxt-vvbrt
The only thing I've done was wrapping your dynamic route in <no-ssr> tag to get rid of an error. Your component is not compatible with SSR.