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

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

1 Like

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

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?

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

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.

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 :+1:

Thanks,
Jay

1 Like

Thanks @jaylowe1 you solved my problem god bless you

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


Thanks sooooo much!

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

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

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.) :+1: