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

react-router-component深层链接。可能？

1 个答案: