Question

我有一个如此实现的反应路由器：

ReactDOM.render((
  <Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
      <IndexRoute component={IndexPage} />
      <Route name="listView" path="things" component={ThingsList}>
        <Route name="expandedView" path=":_id" component={ThingExpanded} />
      </Route>
    </Route>
  </Router>
), document.getElementById("body"));

我正在渲染列表，并且没有问题地注册路由。以下组件。

let ThingsList = React.createClass({
render() {
  return (
    <div>
      <ul>
        {things.map((thing) => {
          return (
            <li key={things._id}>
              <Link to={`/things/${thing._id}`}>
                <span>{thing.firstName}</span>
              </Link>
            </li>
          )
        }
      </ul>
    </div>
  )
}
})

但是，如果单击链接并注册路径以扩展特定项目的视图，我该如何显示其他数据？我需要读取路由器信息，并相应地呈现其他信息。我的意思是它不应该基于onClick，基于路线。像这样的东西？：

componentDidMount () {
  let rName = Router.getName;

  if (rName == "expandedView") {
     let rSlug = Router.name("expandedView").slug("_id");
     this.setState({expand: true, which: rSlug});
  }
}

render() {
  let extra;
  if (this.state.expand) {
    extra = <ThingExpanded />
  }
}

然后在List组件中：

render() {
  return (
    ...
    <Link to={`/things/${thing._id}`}>
      <span>{thing.name}</span>
      {extra}
    </Link>
  ...)
}

注意：这个答案非常接近我的需要，但没有成功。：/ Conditional handler based on slug in React Router?

基于路径参数渲染子组件

0 个答案: