Question

我有一个如下所示的app.js文件：

class App extends Component {
  render() {
    const {classes} = this.props;
    return (
      <React.Fragment> 
        <AppBar/>
        <BrowserRouter>
          <Route render={({location}) => (
          <TransitionGroup>
          <CSSTransition
              key={location.key}
              timeout={100}
              classNames="someanimation"
            >
          <Switch location={location}>
               <Route exact path="/" component={HomePage} />
               <Route exact path="/contact" component={ContactPage} />
               <Route exact path="/customer/:id" component={CustomerPage} />
               <Route component={ErrorPage} />
             </Switch>
           </CSSTransition>
         </TransitionGroup>
       )} />
        </BrowserRouter>
     </React.Fragment>
    );
  }
}

此组件具有一个应用栏和一个在下面具有路由的路由器。 appbar在这里的要点是，应用程序在整个应用程序中始终只有一个appbar。仅下面的页面会更改。

在我的联系页面中，我有一个按钮，该按钮可以转到传递了参数的自定义页面：

<Button component={Link} to={'/customer/' + customerID[99]}>

当应用程序转到该客户页面时，我希望应用程序栏显示后退按钮。因此，我必须以某种方式通知应用程序栏以显示此按钮，然后还知道要返回的页面（应该是最后一页）。我已经搜索了一些示例，但是找不到适合这种情况的示例。

Answer 1

反应路由器包含withRouter higher-order component，可以为应用程序栏组件提供相关的道具。

反应路由器由history.js库提供支持，该库是基于浏览器历史记录API的抽象。尽管可以使用history.goBack()来浏览浏览器的历史记录，但是它不能单独浏览应用程序，因为窗口历史记录可能包含其他网站。

该组件看起来像这样（demo），并且应该是路由器组件的子代，以获取路由器道具：

@withRouter
class AppBar extends Component {
  state = {
    locations: [this.props.location]
  };

  componentDidMount() {
    this.props.history.listen((location, action) => {
      if (action === 'REPLACE')
        return;

      this.setState({
        locations: [location, ...this.state.locations]
      })
    });
  }

  back = () => {
    const [location, ...locations] = this.state.locations;
    this.setState({ locations });
    this.props.history.replace(location);
  }

  render() {
    return (
      <>
        {this.state.locations.length > 1 && <button onClick={this.back}>Back</button>}
      </>
    );
  }
}

它会跟踪位置更改并进行导航。要使其与浏览器历史记录导航按钮（后退和前进）保持同步，将是更加复杂的任务。

单个应用程序应用栏在整个应用程序中导航时显示后退按钮

1 个答案: