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

Hi, @brianjychan. The redirect rule you posted wouldn’t make that change.

The issue has to do with how the assets are referenced in the HTML. For example:

href="/manifest.json"

That will always load manifest.json from the site root.

However, if the reference one of these below instead:

href="manifest.json"

or:

href="./manifest.json"

Then the URL used for the HTTP request will be relative to the current path.

Would you please send us a link to the site? If so, we will be happy to see if that is the issue or not.

I found the issue! In my package.json, I had marked homepage as "./", so changing it to "/" removed the error. Thanks @luke your point tipped me off to it.

3 Likes

Thanks! This works just fine

1 Like

Thank you for this. This worked like a charm.

2 Likes

Amazing! This worked for me as well when I was trying to redirect via react-select or directly typing a path into my browser :+1:

Thank you so much!!

With this answer, I solve my problem in 3 min.

Keep going!

Regards

Jonas

1 Like

Glad this got you on the right path! Happy building :netliconfetti:

3 posts were split to a new topic: Eleventy to redirect to an Obsidian Publish

Just wanted to chime in and say thanks!! This worked for me too!

This was the key to my resolution. My build script was setting my homepage to ./ and changing it to / (as well as creating a _redirects file as described above) fixed it. Thank you!

1 Like

Thanks for coming back and letting us know! I am glad that this got you on the right track. Happy building :rocket:

For me too! simple solution!

1 Like

Hey jaylowe1

You just saved a drowning man by giving a straw :sweat_smile: , was facing same issue but now it’s working fine .
Thank You So Much

Hello @noberto.filho and @Sualeh :wave:t6:! I am glad to hear our solution was able to get your back on track. We really appreciate your feedback.

1 Like

Fixed it for me too! You are a life saver!

1 Like

Hello! I’m having a similar 404 error issue, But my application works locally! It routes fine when visiting the home homepage ’ / ’ or the about us ‘/#about’ nav menu link both in the top nav in the ‘Header.js’ component and the ‘Footer.js’ component at the bottom, which is really just an ID on the homepage. that scrolls to a specific component like 70% of the way towards the bottom of the homepage. This Is definitely a bit novice in the setup but I need to figure out why it can’t work on Netlify! Can anyone spot an obvious error I’ve made?

Here’s my re-directs ( netlify.toml netlify.toml in the root:

[[redirects]]
from = “/menu/*”
to = “/menu”
status = 200

[[redirects]]
from = “/bookings/*”
to = “/bookings”
status = 200

here’s my GH whole repo: GitHub - jonathanschimpf/front-end-capstone-meta-x-coursera

here’s the hosted Netlify with the issue:

coming from : https://app.netlify.com/sites/eclectic-hamster-d94ef6/overview

** the package.json** ( package.json :

{
“name”: “front-end-capstone-meta-x-coursera”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
@fortawesome/fontawesome-svg-core”: “^6.3.0”,
@fortawesome/free-brands-svg-icons”: “^6.3.0”,
@fortawesome/free-regular-svg-icons”: “^6.3.0”,
@fortawesome/free-solid-svg-icons”: “^6.3.0”,
@fortawesome/react-fontawesome”: “^0.2.0”,
@testing-library/jest-dom”: “^5.16.5”,
@testing-library/react”: “^13.4.0”,
@testing-library/user-event”: “^13.5.0”,
“modern-normalize”: “^1.1.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-router-dom”: “^6.8.2”,
“react-router-hash-link”: “^2.4.3”,
“react-scripts”: “5.0.1”,
“react-scroll”: “^1.8.9”,
“web-vitals”: “^2.1.4”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: [
“react-app”,
“react-app/jest”
]
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
}
}

What am i doing wrong? First time truly trying to host something on Netlify. What should i change?

Thanks in advance! Love the ease of setup, but just stuck on this! wondering if the [[redirects]] are fouled up!?

Eureka! I had more time to properly examine the advice given and it turns out the routing wasn’t working because of not having a file extension-less ‘_redirects’ file present in the ‘public’ directory with this line of syntax:

/* /index.html 200

THANKS SO MUCH!! My hard work can now live on the World Wide Web! The Netlify product is great!

1 Like

Hi, I’ve created the _redirects file in the public folder and I still get broken links, am I doing something wrong here?


https://channyhow.com/

This solved the issue! Thank you Brian

Thank you very much.