Page not found for route "/login"

[gabihtoledo0]

I have a problem similar to the ones above, I can’t find my route “/login” that comes with this error:

There was no problem with the deploy, what could have happened?

[luke]

HI, @gabihtoledo0. I split this question into its own topic because I don’t have enough information to troubleshoot.

This is the best place to start for “Page Not Found” issues (the page this was moved from).

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

If you are still seeing issues after following the troubleshooting steps in this guide, please let us know which site is affected and we will be happy to troubleshoot further. Also, please let us know what was found in the downloaded deploy.

[Nyosky]

Hello, Luke thanks So much for splitting this Discussion into a new page on it’s own.
I am actually having this problem since I started today with Netlify.
Please Kindly Help me. I downloaded my hosted Vue app I hosted and I got the index.html file and the build.js file. I really do not understand the troubleshooting tips you mentioned here.
So here is a link to my hosted app.https://optimistic-neumann-70f749.netlify.app/

The routes do not work well if I reload the page when it’s on /route but it works when I route into it From the app.

[luke]

Hi, @Nyosky. This is a common issue and there is definitely a solution!

If I click on “Portfolio” the URL changes to https://optimistic-neumann-70f749.netlify.app/portfolio. However, if I copy/paste that URL into the address bar (or click on this link), the page is a 404 “not found”.

We have a support guide that covers this here:

[Support Guide] Direct links to my single page app (SPA) don't work

Last reviewed by Netlify Support - August, 2023 If you’re building a Single Page Application (SPA), or an app that manages its own routes (url paths), you’ll want to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate: /* /index.html 200 You can read more information in our docs, which can be found here.

To summarize, there is a “Redirect” rule added to the site that always routes all URLs to index.html. Once that is done your site’s javascript will handle the “client side routing” just like it does when you click on a link on the page.

If that doesn’t fix it or if there are any questions about this solution, please let us know.

[Nyosky]

ok so here Is the fix I added in my routing which is still not working for me.
{
path: ‘*’,
redirect: ‘/’
}

I redirected all Wildcard Back to the Homepage But it’s still showing me the 404 Error.
Link to the Updated page. I changed the name
https://stocktrading.netlify.app/

[gregraven]

@Nyosky Have you tried clearing your browser cache? You site seems to be loading for me – no 404, just a simple HTML page that uses Bootstrap 4.52.

[Nyosky]

The site Is actually working when you visit it. you can navigate around well. But the 404 am talking about is when you visit the page like this https://stocktrading.netlify.app/portfolio that is when it gives the 404 But It works when you just visit https://stocktrading.netlify.app/ and navigate through there Directly

[gregraven]

@Nyosky And this page doesn’t help you?

[Support Guide] Direct links to my single page app (SPA) don't work

Last reviewed by Netlify Support - August, 2023 If you’re building a Single Page Application (SPA), or an app that manages its own routes (url paths), you’ll want to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate: /* /index.html 200 You can read more information in our docs, which can be found here.

[luke]

Hi, @Nyosky. You need to add this rule to netlify.toml or _redirects. Adding the rule will resolve the issue.

[gabihtoledo0]

This is the website link.
https://uniwire.netlify.app/login

I followed your tips but I still have this problem, the deployment was successful.

[Nyosky]

Please am new to netlify so I don’t really know where to add the rules you told me.
If you don’t mind can you please start the tutorial from where I will add these rules to netlify?

[luke]

Hi, @gabihtoledo0. There is no login.html file for this site. These are all the files for the current deploy of uniwire.netlify.app:

/robots.txt
/precache-manifest.ff6cc5f93de1d63d55941d9b8c790b73.js
/service-worker.js
/asset-manifest.json
/manifest.json
/favicon.ico
/index.html
/static/js/2.084435d2.chunk.js
/static/js/runtime-main.f17ca920.js.map
/static/js/main.bb3e8b2d.chunk.js.map
/static/js/2.084435d2.chunk.js.map
/static/js/2.084435d2.chunk.js.license.txt
/static/js/main.bb3e8b2d.chunk.js
/static/js/runtime-main.f17ca920.js
/static/media/logo-black.04712d97.svg
/static/media/world-login.06c252e9.svg

I loaded the index.html file but there is no login link on that page. Would you please tell us more about what you are trying to do?

@Nyosky, for your question you need to add this rule to one of two files below:

• _redirects
• netlify.toml

There is more documentation about this here:

https://docs.netlify.com/routing/redirects/

After adding the rule to one of those two files, trigger a new deploy. If there are questions about how to do this, please let us know what steps you have taken so far and we will be happy to assist.

[gabihtoledo0]

The file being defined the route /login is Routes, which is being called by index.js.
On site, everything works but in production I don’t know what’s going on.

[perry]

i don’t actually see an index.js?

when things work locally but not live, it is often a case issue:

Can you give this a read through and let us know if that fixes this?

[Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

Last Reviewed By Netlify Support Staff: December 2022 Are you struggling to understand why your project runs locally but errors out with missing files or logs that point toward issues with case when you try and build on Netlify? You are not alone. Often, case (as in: UPPERCASE or lowercase letters in filenames or paths) can cause problems. Here is a guide to understanding how case sensitivity issues present themselves, why they arise, and how you can fix them! 1. Errors you might see Case sens…

[luke]

Hi, @gabihtoledo0. The file index.js is used to “build” the site. That file doesn’t exist once the site is deployed.

The deployed site’s javascript files do handle the route “/login” correct. This javascript is doing “client side routing”:

What is client-side routing and how is it used?

Right now, your client side routing only works when you click on the links in the page but not when you copy/paste a URL. This happens because the web server returns a 404 not found because there is no file named /login.html. Your client side routing never triggers because the servers sends a 404 first.

The solution for this is to create a “Redirect rule” at Netlify. This causes the server to send your index.html file for /login. Then your client side routing can handle the URL instead of the 404.

If you create the redirect rule below, then the “client side routing” will work:

/*    /index.html   200

The line above need to be put into a file named “_redirects” and that file need to be put in the publish directory for this site. This will resolve the issue.

[Afekhide]

I have tried using the _redirects file, but it still doesn’t work when I paste the url afresh in a new tab.

Here’s the repo

[hrishikesh]

The file goes in public folder.

[quivan96]

You are helping me on my post but maybe you see this first. I now have the Page not found screen.