I have a url with paramenters in my react routes.
I can access the route via {Link} from react router dom as shown below. The page loads upon button click.
However when I refresh the page or try to access the URL via the address bar, I get a blank page and this error message
It works fine locally but the blank page comes up in production. I am hosting the website on heroku.
The best way to handle it is to add a base tag in your index.html.
<base href="/" />
I fixed the problem using the solution in the link below. I initially set my homepage to "." in my package.json and eventually changed it to my app domain
https://stackoverflow.com/a/66950806/6542175
Related
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
I am working on a gatsby hybrid app that has several client-only routes with dynamic server data.
Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.
Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').
I am using the gatsby-plugin-create-client-paths setup
and Router component to handle the client-routing
I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page.
The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.
Any ideas what could cause this behavior??
I guess you are using reach router navigate.
If thats the case, try and use navigate from gatsby.
import { navigate } from 'gatsby'
Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.
The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from #reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.
So, the fix is:
to replace // import { Link } from "#reach/router" with import { Link } from "gatsby".
I'm having issues with react url param routes and it's giving out error on amplify.
Example routes with url params
<AsyncSearchResultsList path="search/:q" />
<AsyncSearchDetailedInfo path="search/user/:id" />
This is the error I'm getting
On amplify I have these redirects setup
I can't navigate to either of these routes and it works fine for other routes without parameters
All of these routes are also working perfectly on localhost
Is there something I'm missing? I'm using Reach Router in my react project.
Update:
Figured what seemed to be part of it, the issue I was having was resolved. Amplify wasn't handling the Lazy loaded route components properly, data is flowing and the page is loading now after refactoring. But another issue came up, the page now displays blank whenever I navigate to those routes directly. I'm pretty sure it's an issue with Amplify's redirect rules. Still need help!
To those who need to use react and params
Source address
Target address
Type
Country code
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
/index.html
200 (Rewrite)
-
/search?customer=<customerid>
/search?customer=<customerid>
301 (Redirect - Permanent)
-
Ref: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
and
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#query-parameters
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component
I have a react app that's hosted on AWS Cloudfront, and the default root is set to index.html, which loads the react app.
So far so good.
I created a new html page page1.html, and then tried accessing it using the full URL, https://my.site.com/page1.html.
Uh oh.
The React app is loaded, and it's router intercepted the URL, and displayed the page not found error. React has no knowledge of the html page, which sounds about right.
If the cache is cleared the page1.html file loads correctly, however as soon as the react app is loaded, the react router starts intercepting the page1.html URL.
Why is that? I kind of expected the direct URL to load the html file bypassing the react app.
And is there a way to add an exception in react router to allow the page to be loaded without being intercepted?