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 content security policy the pages settings blocked the loading of a resource — ToddB
– ToddB, Commented Dec 28, 2017 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
– SirSoDerp, Commented Dec 28, 2017 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
– azium, Commented Dec 28, 2017 at 23:15

Arnold Gandarillas · Accepted Answer · 2017-12-30 02:34:10Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related