When I try to see the cached version of my site on google cache
it always renders 404 page
I think this is because react router does not understand the route because it is running on a different domain because of google cache.
https://webcache.googleusercontent.com/search?q=cache:5Q4gZU5NIwJ:https://www.sitename.com/+&cd=1&hl=en&ct=clnk&gl=in
For posterity, this appears to be at least one of the common issues folks have encountered: https://github.com/ReactTraining/react-router/issues/5801
Related
I am getting a 404 error whenever I try to enter a URL directly in the browser whereas, the normal routing using react-router-dom works fine.
I have a nested routes structure with the nested routes being lazy loaded.
I have also read about a few potential solutions including hashrouter but it comes with the disadvantage of having a hash in the url
Are there any other solutions?
When using React, it's important to understand that the app is only initially loaded when you call the index route (e.g. localhost:3000/), so if you're manually browsing to certain routes (e.g. localhost:3000/testroute), your browser is attempting to GET that specific route rather than loading the React application first.
I'd suggest checking out the answer on this post, as it provides a very detailed explanation and potential solutions. On one of my React apps I encountered this issue and was able to resolve it with a DNS wildcard.
I just deployed my create-react-app via github pages. The site (jasonclerk.com) loads fine when clicking through to the root domain or entering the root domain in URL address bar of browser. However if deep-linking to a directory level page (jasonclerk.com/about) or entering that directory level page in URL address bar, I'm hitting 404 error. If I use the navigation within the site, I can go to the other pages without any issue.
I did use routes (react-router-dom) in my top level component, all have been working fine in local test environment. Also, previously deployed the site via heroku and didn't have any issue with deeplinks. Deployed on ghpages now so I could add custom domain.
Any advice to fix the issue on loading directory level pages directly?
react-router is a good example of client-side routing. You are facing this issue because the GitHub Page server has no idea you are building a client-side routing application. From the server's point of view, it does not recognize /about. There are 2 ways to solve your issue.
Use HashRouter instead of BrowserRouter, the URL will end up not as pretty but since it uses hashes, you don't have to do anything special on the server-side.
Follow this guide here to implement a "hacky" solution for Github Pages. Basically, you add a script in the 404.html (i.e. the page GitHub will display when it receives 404 error), which will redirect all request to your index.html.
I used create-react-app to create my react app.
I have it deployed on AWS Cloudfront + S3. Everything seems to work when I visit the site: https://www.remotecareers.io
However, when I try using the "Fetch and Render" feature of Fetch as Google, I see this:
It's weird that the This is how a visitor to your website would have seen the page: part is empty. However, my main issue is when I try to do the same thing for the non-root routes.
For example, I have this page: https://www.remotecareers.io/remote-jobs/new. It looks like it's working fine. However, when I try fetching it through google it says it's Not Found.
It says the same thing in the new Google Search Console too:
So far even to get just the This is how Googlebot saw the page: part to work, I installed and added:
import "babel-polyfill"; // I tried this by itself as well as with the 2 below
import "url-search-params-polyfill";
import "whatwg-fetch";
What's weird is that the homepage is (partially) working but the rest of the pages aren't being scanned at all. I thought it might be because I wa missing the robots.txt file so I added it but it seems to not have any affect (https://www.remotecareers.io/robots.txt). Can someone help me?
From my experience, relying on googlebots to run javascript to render the app is not very reliable. For best SEO performance, you need to server render your react app.
You will need a dedicated NodeJS server that will render your react app, then send down the rendered HTML to the browser. The browser will receive the HTML response, which includes some script tags as well. After the scripts are loaded, it will run and hydrate your react app so that everything works properly.
Try reading this article to get you started on this topic.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.
I'm using github pages to deploy my personal website. My personal website and many of the other pages being hosted through github use React and React router.
As a result, I've employed Rafrex' SPA in order to prevent a 404 page getting served on refresh. Unfortunately, other projects hosted on github pages get "overwritten" by rafrex since they're not technically an existing route on my website. E.G refreshing on personalwebsite.com/validpage redirects appropriately to that existing page, but personalwebsite.com/othergithubproject gets snatched by rafrex and just displays whatever would normally get displayed on "/". This can be fixed by clearing out the cache on the page and then refreshing but obviously is not a good solution for visitors.
Have I missed something obvious when using Rafrex-SPA? Is this just a flaw in Rafrex-SPA? Is there a good workaround? Thank you!