React Router: Refused to execute script or styles

Question

When I browse http://localhost:8080/create , its working fine but when browse http://localhost:8080/create/344 or http://localhost:8080/edit/224 I'm getting this error:

Refused to apply style from 'http://localhost:8080/edit/dist/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

2345:12 GET http://localhost:8080/edit/dist/bundle.js 404 (Not Found) 345:1

Refused to execute script from 'http://localhost:8080/editt/dist/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Here is my code:

<BrowserRouter>
    <Switch>
        <Route exact={true} path="/" component={Dashboard} />
        <Route path="/edit/:id" component={EditPost}/>
        <Route path="/create" component={AddPost} />
        <Route component={NotFoundPage}/>
    </Switch>
</BrowserRouter>

check this screenshot please:

here is my webpack config file: https://pastebin.com/d5vx8niQ project file: https://drive.google.com/file/d/1IYcuJTbklXYi53XvIcNRJtb-tLOO4g1j/view?usp=sharing

Answer 1

Add <base href="/"> in index.html head before linking all css files. (Source: https://github.com/froala/angular-froala/issues/170)

Answer 2

Just use /dist/main.css & /dist/bundle.js instead of dist/main.css & dist/bundle.js in your HTML.