导航到 IndexRoute、React Router 的子组件

Question

我在这里打开了一个问题：https://github.com/rackt/react-router/issues/2856 有人建议我在这里问这个问题。

我希望能够链接到我的 IndexRoute 的子组件，这样如果我的配置如下所示：

<Route path="/" component={App}>
    <IndexRoute component={Promote} />
    <Route path="earn" component={Earn}/>
    <Route path="vision" component={Vision}/>
    <Route path="contact" component={Contact}/>
    <Route path="demo" component={Demo}/>
    <Route path="tos" component={Legal}/>
    <Route path="privacy" component={Legal}/>
    <Route path="dmca" component={Legal}/>
</Route>

并且我要链接到的组件是Promote 的子组件，我应该能够执行/signup 并且我的索引路由将加载，然后滚动/导航到所需的组件而不是我的Promote 组件。但是我不确定如何在路由配置中指定该路由。有什么想法吗？

我想到的一些可能的方法是覆盖 componentDidMount 并检查路径，然后滚动到该组件或使用 onEnter 挂钩来实现相同的目的，其中第一个看起来更干净。我怀疑没有真正的方法可以使用 React Router 实现这一点。

Answer 1

您是否使用browserHistory 历史实现（而不是hashHistory）？如果是这样，您应该能够将哈希片段附加到 url。例如，如果 SignUp 组件位于 Promote 内，并且 SignUp 组件的容器元素的 id 为 signup，则可以使用如下代码在其他组件中链接到它：

<IndexLink to={{ pathname: '/', hash: '#signup' }}>Sign Up</IndexLink>

该链接会将您导航至/#signup。然后，您可以将以下生命周期方法放在 Promote 组件上。

componentDidMount() {
  this.scrollToHash();
  window.addEventListener('hashchange', this.scrollToHash);
}

componentWillUnmount() {
  window.removeEventListener('hashchange', this.scrollToHash);
}

scrollToHash() {
  if (window.location.hash) {
    let target = document.querySelector(window.location.hash);
    if (target) target.scrollIntoView();
  }
}

componentDidMount() 中this.scrollToHash() 的初始调用导致目标元素在Promote 初始安装时滚动到视图中。 hashchange 事件侦听器处理指向Promote 组件内的SignUp 组件的链接。说到这里，重要的是要注意任何从Promote 到SignUp 的链接都应该使用<a> 标签而不是<Link> 组件来完成。我不确定为什么会这样。无论如何，从Promote 内链接到SignUp 应该如下所示：

<a href="#signup">Sign Up</a>

I created a git repo containing some working example code. 随意使用它并探索代码，如果您有任何问题，请告诉我。