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

您必须在应用程序中使用一个组件，该组件知道所有更改。因此，您可以拥有一个父级App组件，该组件将收到所有更改的通知

<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

如何使用React Router 5以编程方式向上升级路由层次结构？

1 个答案: