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的子组件，我应该能够/注册并且我的索引路由会加载，然后滚动/导航到所需的组件而不是我的Promote组件。但是我不确定如何在路由配置中指定该路由。有什么想法吗？

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

Answer 1

您使用的是browserHistory历史记录实施（而不是hashHistory）吗？如果是这样，您应该能够将哈希片段附加到网址。例如，如果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();
  }
}

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

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

I created a git repo containing some working example code.您可以随意使用它并浏览代码，如果您有任何问题，请与我们联系。

导航到IndexRoute，React Router的子组件

1 个答案: