CODEWITHSUNDEEP
reactjsreact-router
Jayaram
Jayaram

Reputation: 6606

React-Router will not load component on direct refresh

I'm facing a wierd bug for the below router spec

  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={AppContainer}>
        <IndexRoute component={Home}/>
        <Route path="projects" component={ProjectContainer} />
        <Route path="projects/new" component={newProject} />
      </Route>
    </Router>
  </Provider>,document.getElementById('app')

i'm able to navigate to / and /projects by directly entering the url in the browser. however it does not work for /projects/new. the page is just blank (not even the standard cannot GET /projects/new. I can only navigate to the url by navigating from /projects or / pages.

My historyApifallback in webpack is set to true. Where am i going wrong?

Edit: this is the below console.log on loading /projects/new

new:8 GET http://localhost:8080/projects/styles.css 
new:18 GET http://localhost:8080/projects/bundle.js

my index.html seems to be looking for the js and css files in /parent while it should be located in root

    <link rel="stylesheet" href="styles.css">

    <script src="bundle.js" charset="utf-8"></script>

Upvotes: 0

Views: 499

Answers (1)

hansn
hansn

Reputation: 2024

In your <script> tags src attribute, put a slash in the front (e.g /bundle.js). That way it will always use root as the base path.

Upvotes: 1

Related Questions