reactjs - 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

我在文档中找到了答案。

我们只需要使用 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>
    )
  }
})