1

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.

permalik
  • 93
  • 6
  • If you cannot manually navigate to my react-router-dom Routes by typing them into the address bar - there is not a CSP issue, but router config one. Switch off CSP, debug the router and after that you be able to configure CSP. It is difficult to debug two problems at the same time. – granty Aug 25 '21 at 15:57
  • 1
    Maybe this topic can help [React-router urls don't work when refreshing or writing manually](https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually) – granty Aug 25 '21 at 16:33

1 Answers1

2

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.

permalik
  • 93
  • 6