search

W01fw00d / cooking-with-amateurs

Cooking Recipes App. Uses Chemistry-UI
0 stars 0 forks source link

html/broken links #64

Open W01fw00d opened 2 years ago

W01fw00d commented 2 years ago

https://validator.w3.org/checklink?uri=https%3A%2F%2Fcooking-with-amateurs.herokuapp.com%2F%23%2Flist&hide_type=all&depth=&check=Check

Some of the links to this resource point to broken URI fragments (such as index.html#fragment).

Broken fragments: https://cooking-with-amateurs.herokuapp.com/#/list (line 9)

W01fw00d commented 2 years ago

This is an issue related to how ReactRouter/HashRouter works in Single-Page Apps.

HashRouter should not be used in Production... as it causes a pretty bad SEO (URLs have the empty fragment /#/, which might prevent the google crawlers to access other pages different from the home page).

The recommended solution is actually using an isomorphic (also called 'universal') rendering with React. That means having a common configuration for the Router in both Backend and Frontend; which is possible because this project uses JS on both sides.

There's a long explanation on the subject here: https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually.

This might be a big change in app config, need to find a good example that applies to our stack (React + Node).

W01fw00d commented 2 years ago

react-router-dom is a good solution for this web app. It has all that's needed from react-router applied to web apps.

https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other

W01fw00d commented 2 years ago

A bit more of info about the issue: https://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router