Netlify "page not found" when sharing React-Router-Dom based links

[jaylowe1]

Hi all,

First off–love the netlify product.

Okay so here’s the issue: Whenever I attempt to access part of my React application via URL (ex: accessing the “about” page of my website by typing “thebamfblog.com/about” in the URL) I get the following error.

This is very problematic as the social media sharing buttons that users click on utilizes a link to the post they want to share–but because of this routing issue–whatever they share will direct them to this error page instead of the expected article.

Navigating to the link via the react-dom-router buttons within the application causes no issues.

I am using react-router-dom and have little experience with netlify, but am learning fast!

Any help appreciated.

Thanks,
Jay

[jaylowe1]

Update: Still not working but attempted following solutions.

I have added a _redirects file to the build directory with the following information inside it:

However, I am still getting the ‘page not loading’ error.

I am using the default publish directory of build/.

Github link: https://github.com/ogjaylowe/deploy_test
link causing redirection error: thebamfblog.com/about

[Pie]

Hey,

Thanks for the feedback. First thing’s first, have you managed to build this locally with success? Have you tried putting the _redirects file in your public folder?

[jaylowe1]

Hi Pieparker,

Using yarn build > yarn global add serve > serve -s build, I can successfully navigate the React application by directly typing the IP address and /about in the URL (x.x.x.x:5000/about).

There is currently a copy of _redirects in the public folder as well as top directory of the repo.

Any ideas on how to handle this redirection challenge?

Thanks,
Jay

[luke]

Hi, @jaylowe1, I’m not seeing any redirect processed by the most recently published deploy here:

https://app.netlify.com/sites/thebamfblog/deploys/5e8a5218c7ae880007da78e9

Quoting:

No redirect rules processed
This deploy did not include any redirect rules.

This is a public repo so I tested the git clone, yarn install, and yarn build for this repo. When I did this it created the file in the build directory as _redirects.txt not _redirects.

I don’t know why the build does this but that is the reason the redirect isn’t being processed.

Do you know how to get the build to keep the filename unchanged when building? If so, that is the solution and the redirect will work as expected once this is done.

[jaylowe1]

Hi Luke,

I appreciate your through response! Things have been crazy for me so I’m just now getting some time to problem solve.

Using the issue that you pointed out, I successful resolved the problem using two strategies:

1. I accessed the /public folder via GitHub, deleted the file, and manually added a new _redirects file with the same information.
2. I added the following after the “build” script within package.json – "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ". This insured that future builds did not receive a .txt format _redirects file.

Thanks so much to the Netlify support and build teams! You guys rock and your product is awesome. Keep it up

Thanks,
Jay

[satyamsinha111]

Thanks @jaylowe1 you solved my problem god bless you

[Santoro]

Hey jaylowe!
I tried this, but it’s still not working… could you please take a look for me??

SantoroA/pantoja-react-two

Thanks sooooo much!

[fool]

Not seeing where you create your _redirects, @Santoro? Could you tell me how you’re making the one that is described here?

Rewrites and proxies

[naothomachida]

I created a _redirects file in public folder with this content below:

SOLVED FOR ME! THANKS SO MUCH

Redirects from what the browser requests to what we serve

/* /index.html 200

[luke]

Hi, @naothomachida. Thanks for confirming the solution which worked for you!

(This is very helpful for others searching the community site and our support team appreciates this update as well.)

[imhashir]

Signed up just to Thank You.

I was using prerendering feature and having this no route found issue. Your solution worked flawlessly.

Thanks Man.

[dellalisalim]

I’ve got that kind of problem too, I’ve been using react-router-dom and on localhost links worked fine, until I’ve pushed my repo to github and deployed it to netlify, what I did was just adding a _redirect file inside public/ folder and put /* /index.html 200 inside of that file, and voilà my links a now working on Netlify.
I’ve created a community account just to thank you.
Love the Netlify product <3

[perry]

glad it is working for you! thanks for the kind words

[dinerf]

Create the _redirects file worked for me too! Thx

[andreidim]

Thanks very much Mr. @jaylowe1 and @luke, it works, just to recap:

1. Add _redirects file in your public folder
2. Write down inside file:

/* /index.html 200

In my case I have no issues with my builder adding .txt extension, I’m using CRA(Create React App).

You guys Rock!

[agarcia]

this worked like a charm, thank you!

[ichbinclamp]

Hi there,

I think I have a similar issue, though adding the _redirects file within the public directory has not solved it.

Whenever I try and route to a page through a direct (nested) URL , such as ‘JVC Parry’, it fails to load a page and gives the error

Uncaught SyntaxError: Unexpected token '<' main.e3eaf229.chunk.js:1

However when I navigate the deployed version through links, everything loads fine. I also don’t get this error when I’m running the app locally, which I guess means it must be something to do with deployment?

I’ve trawled through all the other posts I can find with this error, and also things to do with Netlify/CRA deployments.

My code is on github here: GitHub - NatClamp/jvcparry

Deployed version is here:
https://jvcparry.com/ and if you go to JVC Parry you’ll see the error I’m getting.
This is the netlify page: Netlify App

Can anyone shed any light on this? Thanks in advance

[perry]

hi there! can you first confirm that all of your redirects are being processed?

[brianjychan]

I’m experiencing the same problem as @ichbinclamp , and my one redirect rule /* /index.html 200 is indeed being processed fine. Any thoughts?

Edit: it seems that it’s trying to retrieve the /static/ js / CSS files at the end of the full path, instead of at the root of the site? Related to this post: Create-react-app netlify.toml redirects rule redirects all static js files to index.html