react-router-component深度链接。有可能吗？

Question

我在使用react-router-component时遇到了一些麻烦。

下面的代码可以很好地工作，至少对于像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>
    )
  }
})

是否有可能像下一个那样实现更深层次的路径处理：

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

文档中没有关于该问题的示例。

谢谢!

Answer 1

我在文档里找到了答案。

我们只需要创建带有位置的嵌套组件。

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>
    )
  }
})