1

I have a react app that has several pages. When I refresh the page, I can successfully link to one other page. Subsequent links update the url address with the reference to the new page, but only load after the page refreshes.

Error messages in different browsers differ.

In chrome:

enter image description here

In firefox:

enter image description here

In safari:

enter image description here

I have seen this post which has very long, complicated suggestions about routing. I'm not sure if this is my problem yet, so have not yet explored the ideas set out as solutions.

Mel
  • 2,481
  • 26
  • 113
  • 273
  • Those errors are thrown from 3rd party scripts you have embedded in you React app? – Robert Cooper Jul 17 '20 at 03:50
  • 1
    In my case, when I have that `ERR_BLOCKED_BY_CLIENT` in Chrome, means that the network request was not made. it could be an extension in your browser blocking the request (like an Ad Blocker) or your local network rules. – Bruno Monteiro Jul 17 '20 at 03:55
  • 1
    So do you think the url updating on link click, but the page not loading until refresh is an independent problem? – Mel Jul 17 '20 at 05:47

2 Answers2

0

2nd screenshot shows that something tries to load /your-path-to-fontawesome/css/all.css and most probably you don't have that file at that location (therefore receiving html instead). You need to config something somewhere in code, connected to fontawesome

Gennady Dogaev
  • 5,902
  • 1
  • 15
  • 23
0

Two separate issues here:

First, the combination ERR_BLOCKED_BY_CLIENT and ERR_UNSAFE_REDIRECT are usually the result of a browser extension, or the browser itself, blocking cross-site tracking. This would also make sense why you're only seeing it in a particular browser.

Second, the invalid MIME type for your CSS typically comes from one of two things. The most common, and easiest to fix, is that the path to that file is wrong. In this case, the server responds with a 404 page, giving you the invalid MIME type of text/html.

Another possibility is a library adding comments to the top of a CSS file that is meant to be minified before being sent to the client. Here's a more in-depth post about this issue. Would definitely double-check the file path, though, before digging deeper into this possibility. An easy way to check would just be to take that URL from the MIME type error and navigate to it in your browser to see what you get.

tyler-tm
  • 76
  • 7
  • Hmm - so you think the error messages I flagged in the post are unrelated to the problem with the links not rendering the linked component until the browser refreshes? – Mel Jul 24 '20 at 22:09