React-redux-starter-kit: Issue with nesting the routes

[zoilorys]

Playing around with kit. I got this setup for routes :

<Route component={CoreLayout}>
    <Route name='home' path='/' component={HomeView} />

    <Route name='user-info' path='user' component={UsersView}>
      <Route name='profile' path='user/:id' component={Profile} />
    </Route>
    <Route name='about' path='about' component={AboutView} />

    <Route name='dashboard' path='dashboard' component={DashboardView} />
    <Redirect from='admin' to='dashboard' />
  </Route>

Nested routes like 'user/:id' , or even without params, just 'user/profile' doesn't work - error 404 =\
Tried different types of nesting, even without path with '/', like

<Route name='user-info' path='user' component={UsersView}>
       // this should inherit the route, so its /user/profile
      <Route name='profile' path=profiles' component={Profile} />
</Route>

, nothing works... Read through 1.0.0-beta3 docs many times, it seems like i'm doing everything right - but it doesn't work.
Can anyone figure out whats the problem?
Wrapping component UsersView renders {this.props.children}.

[davezuko]

Not sure just yet if this is a problem with the starter kit or react-router or some combination, but I've reproduced it and am looking into it.

Going to link to your issue on react-router while this is troubleshooted: https://github.com/rackt/react-router/issues/1682 ... seems like it might be a problem with their 1.0.0 version, as there are a few related issues open in their repo.

[zoilorys]

@davezuko , yeah i guess so. I think ill try to replace current router with 0.13 and try to work with it until it will be resolved. Thank you :)

[davezuko]

@zoilorys Ok, hopefully that works. I experimented with removing the <Provider> that we have to wrap the <Router> in but had no success. I'm not doing anything else special with the routes so I'm pretty convinced it's a bug with react-router, sadly. I'll ping you if I manage to get it working.

Going to leave this ticket open in the meantime in case someone happens to have an idea.

[zoilorys]

@davezuko , ok, thanks again) Yeah i will post here if swapping router version helps, then i guess it will be obvious whats the problem.

[davezuko]

@zoilorys I changed the history that's passed to the Router from BrowserHistory to HashHistory and it works... so now on to see why this is the case. But you could use that as an alternative for now.

In the starter-kit, this is in ~/src/entry-points/client.js

This is my route structure

export default (
  <Route component={CoreLayout}>
    <Route name='home' path='/' component={HomeView} />
    <Route name='user' path='/user' component={UserView}>
      <Route path='/:id' component={ProfileView} />
    </Route>
    <Route name='about' path='/about' component={AboutView} />
  </Route>
);

Then:

// views/user/profile/index.jsx
import React from 'react';

export default class ProfileView extends React.Component {
  constructor () {
    super();
  }

  render () {
    return (
      <div>
        <h2>Profile {this.props.params.id}!</h2>
      </div>
    );
  }
}

// views/user/index.jsx
import React from 'react';

export default class UserView extends React.Component {
  constructor () {
    super();
  }

  render () {    
    return (
      <div>
        <h1>User View!</h1>
        {this.props.children}
      </div>
    );
  }
}

[davezuko]

Also might want to check this out: https://github.com/rackt/react-router/issues/676

[davezuko]

@zoilorys sorry for the spam lol, but I just added a publicPath option in the webpack client configuration and it appears to have fixed the issue. Either pull the latest master or add it yourself... hopefully this solves your problem!

// ~/build/webpack/client/index.js
const config = makeConfig({
  name   : 'Client',
  target : 'web',
  entry  : {
    app : [
      projectConfig.inSrc('entry-points/client')
    ],
    vendor : projectConfig.VENDOR_DEPENDENCIES
  },
  output : {
    filename : '[name].[hash].js',
    path     : projectConfig.inDist('client'),
    publicPath : '/' // ADD THIS
  }
});