How can I reach routed components within my React SPA, while maintaining proper CSP?

Question

I cannot manually navigate to my react-router-dom Routes by typing them into the address bar (like: localhost:8080/notfound). However, I can reach the desired location by following the instantiated RRD Link.

Instead, I receive "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)."

I'm working in a functioning React app which I'm building with from-scratch configuration. This is to say, I'm not using create-react-app and its boilerplate config. Here is my personal boilerplate..

My current understanding is: I need to properly implement a CSP. Here are some parameters I included in a meta tag...

http-equiv="Content-Security-Policy"

content="script-src 'self' 'unsafe-inline' 'unsafe-eval'"

There are other questions related to this topic. But, they either address loading an external site or actively blocking the loading of a script (which seems to be opposite my concern).

A similar question offers an answer which uses react-helmet to leverage a link with rel='canonical' and a href to point to index. This may be the solution, but I've yet to prove it.

Many thanks.

Answer 1

In webpack.config.js, module.exports:

add devServer: {historyApiFallback: true}

and add publicPath: '/' to output object.

With client side rendering, a path back to index or root must be established. This allows JavaScript to reload, thus enabling routing for subsequent navigation.

This article explains thoroughly.