Реагировать на обратный вызов маршрутизатора с текущим маршрутом к дочернему компоненту

Question

Я использую реакцию с маршрутизатором реакции.Некоторые из моих компонентов имеют определенные под-маршруты, поэтому я хочу передать им обратный вызов, который позволяет вернуться к определенному маршруту / компоненту.Я хочу избежать передачи строки определенному маршруту (из-за зависимости при изменении маршрутизации в коде).Поэтому я предпочитаю передать обратный вызов и заполнить его значением match.url.

Но это не работает: вместо передачи значения match.url всегда ссылается на текущий маршрут.

Родительский компонент (упрощенный):

export class ParentComponent extends React.Component {
  render() {
    const { history, match, contentId } = this.props;

    return (
      <div>
        <div>
          <div>Block 1</div>
          <div>Block 2</div>
          <div>Block 3</div>
        </div>
        {contentId && <MyChildComponent content={contentId} goBack={() => history.push(match.url)} />}
      </div>
    );
  }
}

Мой дочерний компонент (упрощенный):

export class MyChildComponent extends React.PureComponent {
  render() {
    return (
      (
        <React.Fragment>
          <div role="dialog" onClick={this.props.goBack} />
        </React.Fragment>),
    );
  }
}

Мой маршрутизатор:

const Routes = () => (
  <Router history={createBrowserHistory()}>
    <div>
      <Route path="/result/:contentId?" component={ParentComponent} />
    </div>
  </Router>
);

Поэтому, когда я перехожу к / result, я вижу - как и ожидалось - все, кроме дочернего компонента.При переходе к / result / someId я вижу дочерний компонент, но goBack ссылается только на текущую страницу вместо предыдущей.

Answer 1

constructor(props){
   super(props);
   this.goBack = this.goBack.bind(this);
}

goBack(){
    this.props.history.goBack(); // You're not calling it from history
}

.....

<button onClick={this.goBack}>Go Back</button>

Answer 2

Я понял, что основная проблема заключается в том, что мне нужна по крайней мере одна часть дочерних маршрутов в родительском компоненте.Это приводит к изменению реквизита пути также в родительском компоненте при изменении дочерних маршрутов.

Мое решение: сохраните текущее местоположение в конструкторе родительского компонента и передайте его в качестве подпорки дочерним компонентам для обратной ссылки.Это работает, но имеет недостаток, заключающийся в том, что нельзя напрямую получить доступ к маршрутам дочерних компонентов, поскольку они не будут ссылаться на правильный родительский путь.Для моего случая использования это хорошо, но улучшения приветствуются.

Родительский компонент

export class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.location = this.props.location.pathname;
    }

    render() {
      return (
          {contentId && <MyChildComponent content={contentId} goBack={() => 
          history.push(this.location)} />}
      )
    }

Answer 3

Я думаю, что вы используете push для перехода на другой маршрут.Поэтому, когда вы делаете history.push('/result/someId'), вы добавляете еще одну запись в стек истории, поэтому goBack будет переходить к предыдущей записи в стеке, которая является /result.Он работает так, как если бы вы были обычным веб-сайтом и нажали на ссылку - вы все равно можете вернуться назад, даже если изменился какой-то динамический параметр.

Если вы не хотите добавлять в стек использование истории - history.replace('/result/someId')

См. навигация по истории .