CODEWITHSUNDEEP
javascriptreactjsreact-router
SirSoDerp
SirSoDerp

Reputation: 51

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

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

Upvotes: 1

Views: 685

Answers (1)

Arnold Gandarillas
Arnold Gandarillas

Reputation: 4322

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.

Upvotes: 2

Related Questions