Accessing other html files on a cloudfront distribution hosting a react app - reactjs

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?

Related

After a refresh, the React App in Netlify crashed

After deploying my React app in Netlify, when I refresh my base url's page, it works, but when I refresh other routes, the app crashes.
I want the browser to load the specific route's contents after refreshing the page.

Load vanilla javascript page with react router?

I've got a Reactjs web application at example.com
It has routes at example.com/subpage1 ... example.com/subpage2 ...etc. Anything I go to at example.com/* loads my react app.
I'd like to let an existing vanilla javascript page load when someone goes to example.com/differentPageEntirely
How can I do this?

Nginx + React fail to load resources

Hey. I have a problem with react. I use '/' path for client (some static html content), and '/panel' for example for another server using 1 domain.
But i have errors which don't load my react page.
So on home location (http://localhost/) all good.
http://localhost/panel - only 'react app' in title.

That's because your React app tries to load the CSS and JS from the root path. Configure the homePage field in package json to be
"homePage": "/panel"

React router not loading dynamic url in production

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

Managing routes in reactjs app in production

How is routing handled in a built react app?
Specifically, in a development environment, we can simply hit <host>:<port>/<some-path> and the corresponding component is loaded, but once the app is built, we get a bunch of static files and single index.html file, which are then served by some server.
Now, upon hitting the url <server-host>:<server-port>, the app works as intended, but upon entering the path, say <server-host>:<server-port>/<component-path>, a 404 error is returned.
If there is, say a button, upon clicking which, the same /<component-path> is to be redirected, the app works, but then again upon refreshing that page, 404 error occurs.
How can this be solved? What is the correct way to serve such apps having many components at different routes?

approach1:(recommended)
In server config you should point all urls ( http://ipaddress:port/<* any url pattern>) to index.html of react-app . this is known as fallback-mechanism.
And when any request comes,index.html of React app will take care of that automatically because it is single page application.
approach2:
Use HashRouter in React app. So You will not have to configure anything.

Depending on which server you are deploying to, you should redirect all errors to the index.html look for the configuration maybe htaccess or for example if it an AWS S3 bucket you just specify the error page to the same index.html file that is served. Then you handle actual error in your code using a routing library like maybe react-router-dom to take care of actual error. Your failure is because in normal circumstances in a static host when you provide a URL like <server-port>/<component-path> the assumption the server makes is that there is a folder with name component-path in your root directory which has an index file from where to load and display but in the case of React single page application, everything is managed by the index.html. So every request has to pass via the index.html

Resources