Let's say I have the following setup:
React Application at /
A previously existing application at /path/to/application
A JPG at /assets/image.jpg
A static HTML file for use in an iFrame at /static/index.html
ReactRouter (react-router-dom) is attempting to resolve all of these scenarios - displaying the Not Found component in example 2, 3 and 4 as they are naturally not configured.
Strangely, this behaviour seems to differ per browser. Safari and Firefox Quantum resolve as expected, but Chrome does not. For example, in the iFrame example, Chrome is displaying a new instance of the entire root React app inside the iFrame, whereas Safari and Firefox are loading the static HTML file contents.
I have tried using HashRouter instead of BrowserRouter but with no luck.
Is there a way I can configure my React application to ignore specific child paths, to allow the server a chance to handle this content?
Related
I have created the build by npm run build and hosted the build folder on a server.
My problem is that I can see the static files by their paths. Eg - https://[mydomain.com]/static/js/11.ba24d9f9.chunk.js2
While if this file doesn't exist(hit a random url on this domain, eg - https://[mydomain.com]/abaknan),
it will render my 404Component because of react-router * entry.
Is it possible to block this chunk route and show 404component ?
React is a Javascript library for UI rendering on the client-side. So, it requires all the compiled JS loaded into the document in order to render the components.
If you are using any sensitive information on your page. Please secure those in your backend application.
The compiled JS chunk files are necessary to render the page. So, they must be accessible from wherever you're requesting the page. Other endpoints return your custom 404 page because the file wasn't found by React Router. Blocking chunk routes is not possible from your UI framework, you will need to add those rules on your server.
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
I have a form page that renders react components. These components render images that have been uploaded to the local environment (normally they are uploaded to s3).
Originally, I setup my test environment path to point to inside my spec folder (as advised in the paperclip documentation):
```
Paperclip::Attachment.default_options[:path] =
"#{Rails.root}/spec/test_files/:class/:id_partition/:style.:extension"
Paperclip::Attachment.default_options[:url] =
"#{Rails.root}/spec/test_files/:class/:id_partition/:style.:extension"
When capybara visits a page with the components, the page gets rendered properly if I remove the img element from the component, but if I include the img element, a request is made to the server based on the value specified in the image source field. The above path and url aren't public, so this causes a routing exception and my test fails. If I change spec to public, it works.
If the image is not actually being rendered, why does react/capybara/phantomjs make the request? Is there a way I can configure this stack to not make requests to the image source (for example, if I just wanted to just dummy values)?
Stack:
Rails 4
React
Capybara
Phantomjs
Poltergesit
Rspec
Paperclip
Situation:
I'm building a React app with React Router.
It was generated from create-react-app.
I need to host it statically.
If I visit the home page first and then click around, everything works fine.
Problem:
When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
How can I make all urls directly visitable by only changing code in my react app?
After some research, I figured out that what I needed was a static site generator.
There are a couple of options available that works with React.js
React Static
Gatsby
Next JS
Some useful articles on getting started:
For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24
For React Static: https://medium.com/#tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc
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?