html/broken links

[W01fw00d]

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]

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]

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]

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