react-router-component deep linking. Possible?

Question

I experience some troubles with using of the react-router-component.

The next code works fine at least for links like http://localhost:8080/#about:

var App = React.createClass({
  render: function() {
    return (
      <Locations hash>
        <Location path="/" handler={IndexPage} />
        <Location path="/good(/*)" handler={GoodPage} />
        <Location path="/about(/*)" handler={AboutPage} />
        <NotFound handler={NotFoundPage} />
      </Locations>
    )
  }
})

Is it possible to implement deeper path processing like the next one:

http://localhost:8080/#about/insurance 

?

Documentation doesn't have examples about the issue.

Thanks!

Answer 1

I've found an answer in the docs.

We just need to create nested components with Locations.

var Sidebar = React.createClass({

  render: function() {
    return (
      <Locations>
        <Location path="/" handler={MainSidebar} />
        <Location path="/users/:username" handler={UserSidebar} />
      </Locations>
    )
  }
})

var Content = React.createClass({

  render: function() {
    return (
      <Locations>
        <Location path="/" handler={MainContent} />
        <Location path="/users/:username" handler={UserContent} />
      </Locations>
    )
  }
})

Then combine them into a single component:

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Sidebar />
        <Content />
      </div>
    )
  }
})