Как программно подняться на один уровень вверх по иерархии маршрутов с React router 5?

Question

У меня есть одно функциональное требование в моем проекте, чтобы он имел кнопку «Назад», которая будет перемещать пользователя на один уровень вверх по иерархии маршрутов.

Учтите, у меня есть следующие маршруты:

// Home Component
<div>
    <Route path="/courses" component={CourseComponent} />
    <Route path="/settings" component={SettingsComponent} />
</div>

Вложенные маршруты:

// Course Component
<Switch>
    <Route path={`${match.path}/:courseId/details`} component={CourseDetailComponent} />
    <Route path={`${match.path}/classes`} component={ClassComponent} />
    <Route
        exact
        path={match.path}
        render={() => <h3>Courses...</h3>}
    />
</Switch>

Теперь я хочу перейти от CourseDetailComponent к CourseComponent, используя эту кнопку возврата.

Примечание: я не могу использовать history, так как при этом будет использоваться история браузера, учитывая случай: если пользователь напрямую попадает на страницу с помощью URL.

Answer 1

Вы должны использовать один компонент в вашем приложении, который знает все изменения.Таким образом, вы можете иметь родительский компонент приложения, который будет уведомлен обо всех изменениях

<Route component={App}>
  {/* ... other routes */
</Route>

var App = React.createClass({
  getInitialState () {
    return { showBackButton: false }
  },

  componentWillReceiveProps(nextProps) {
    var routeChanged = nextProps.location !== this.props.location
    this.setState({ showBackButton: routeChanged })
  }
})

Ссылка здесь: https://github.com/ReactTraining/react-router/issues/1066#issuecomment-139233328