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.
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
Github link: https://github.com/ogjaylowe/deploy_test
link causing redirection error: thebamfblog.com/about
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
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?
Hi, @jaylowe1, I’m not seeing any redirect processed by the most recently published deploy here:
No redirect rules processed
This deploy did not include any redirect rules.
This is a public repo so I tested the
yarn install, and
yarn build for this repo. When I did this it created the file in the
build directory as
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.
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:
- I accessed the
/public folder via GitHub, deleted the file, and manually added a new
_redirects file with the same information.
- I added the following after the “build” script within
"react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ". This insured that future builds did not receive a .txt format
Thanks so much to the Netlify support and build teams! You guys rock and your product is awesome. Keep it up
Thanks @jaylowe1 you solved my problem god bless you
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.)
Signed up just to Thank You.
I was using prerendering feature and having this no route found issue. Your solution worked flawlessly.
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
glad it is working for you! thanks for the kind words
Create the _redirects file worked for me too! Thx
Thanks very much Mr. @jaylowe1 and @luke, it works, just to recap:
- Add _redirects file in your public folder
- 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!
this worked like a charm, thank you!
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 ‘https://jvcparry.com/products/indie’, 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
My code is on github here: GitHub - NatClamp/jvcparry
Deployed version is here:
https://jvcparry.com/ and if you go to https://jvcparry.com/products/indie 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
hi there! can you first confirm that all of your redirects are being processed?
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