Навигация по подкомпоненту 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. Однако я не уверен, как указать этот маршрут внутри конфигурации маршрута. Есть предположения?

Некоторые из возможных способов, которые, как я думал, являются переопределением компонентаDidMount и проверка пути, а затем прокрутка к этому компоненту или использование крючка onEnter для достижения того же, из которых первый кажется более чистым. Я бы заподозрил, что нет реального способа добиться этого с помощью React Router.

Answer 1

Вы используете версию истории (а не hashHistory)? Если это так, вы должны иметь возможность привязать хэш-фрагмент к URL-адресу. Например, если SignUp компонент находится в Promote и элемент контейнера для SignUp компонента имел идентификатор 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. Вы можете играть с ним и изучить код, и дайте мне знать, если у вас есть какие-либо вопросы.