2

I'm using React-Router and just updated my routes to incorporate nested URLs and it seems to have broken Webpack's live reloading:

<Route path="/" component={App} ignoreScrollBehavior>

  <Route path="dashboard" component={Dashboard}>
    <Route path="greeting" component={Greeting}>
      <IndexRoute component={ButtonArray}/>
    </Route>
    <Route path="zest" component={Zest}>
      <IndexRoute component={ButtonArray}/>
    </Route>
    <Route path="blank" component={Blank}>
      <IndexRoute component={ButtonArray}/>
    </Route>
    <Route path="reports" component={Reports}/>
    <Route path="customer" component={Customer}/>
    <Route path="ads" component={Ads}/>
    <Route path="survey" component={Survey}/>
    <Route path="arrival" component={Arrival}/>
    <Route path="data_collection" component={DataCollection}/>
    <Route path="website" component={Website}/>
    <Route path="stores" component={Stores}/>
    <Route path="store_address" component={StoreAddress}/>
    <Route path="service_desks" component={ServiceDesks}/>
    <Route path="business_hours" component={BusinessHours}/>
    <Route path="customer_servants" component={CustomerServants}/>
  </Route>

</Route>

Does anyone see this as well using webpack hot reloading? Now, unless I am at localhost:8000/ or localhost:8080/dashboard, whenever I save an update the live reload breaks with a cryptic (useless) error pointing simply to app.js in index.html

Is there a better way to incorporate nested routing than what I've shown above?

I need a base / endpoint, I need a /dashboard endpoint and then all of those nested endpoints under that. Later on I plan on adding more top level endpoints parallel with /dashboard (e.g. /widget)

John Trichereau
  • 626
  • 9
  • 22

0 Answers0