react-router-component 深度链接。可能的？答案

【问题标题】：react-router-component deep linking. Possible?react-router-component 深度链接。可能的？
【发布时间】：2016-02-13 22:13:59
【问题描述】：

我在使用 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

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

谢谢！

【问题讨论】：

标签： reactjs react-router-component

【解决方案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>
    )
  }
})

【讨论】：