React-Router how to link the links to the actual page

Question

Edit: I figured out that when going directly like that, the browser tries to find the file named "pricing", how can I make the browser not do that and look for index.html? I am running on webpack-dev-server

Edit2: I get it a bit now, I want to link localhost:8080/pricing to directly go to index.html then run through the router and get to the pricing component, how can I do that?

I have set up a React-Router on a website, but when accessing a specific page directly (e.g.: localhost:8080/pricing), it gives me the following errors:

Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:7080/685880ef-cf95-4ccf-a6f6-3d8c182ee941 (“default-src http://localhost:7080”).
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:7080”). Source: ;(function installGlobalHook(window) {...

Here's my code for the page

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
    ,
  document.getElementById('app'));

export default class App extends React.Component {
  render(){
    return (
      <div>
        <Header/>
        <Body/>
        <Footer/>
      </div>
    );
  }
} 

class Body extends React.Component {
  render(){
    return (
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/pricing' component={Pricing}/>
        <Route path='/contactus' component={ContactUs}/>
        <Route path='/buy' component={Buy}/>
      </Switch>
    );
  }
}

Note that it works if I directly access the mainpage if I go to localhost:8080 then use my links to navigate between the other pages

Have you had a look at any of these? [content security policy the pages settings blocked the loading of resource](https://stackoverflow.com/questions/33453405/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource-a) [content security policy the pages settings blocked the loading of a resource](https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource) — ToddB, Dec 28 '17 at 22:51
Not the same problem as mine, I should update my title and look around a bit more because I realised the problem was not what I thought it was — SirSoDerp, Dec 28 '17 at 23:07
sounds like something funny with your webpack config. do you need a custom config? what if you tried this with create-react-app ? — azium, Dec 28 '17 at 23:15

Arnold Gandarillas · Accepted Answer · 2017-12-30T02:34:10.753

I guess the problem is with your webpack configuration, you need to add historyApiFallback to your devServer section:

This configuration will allow you to go to pricing page directly.

devServer: {
  historyApiFallback: true,
  host: '0.0.0.0',
  hot: true,
  port: 3000
}

or in your scripts section (in your package.json file):

"scripts": {
  "start": "webpack-dev-server --history-api-fallback"
}

Check this out to see the documentation.

React-Router how to link the links to the actual page

1 Answers1