Одна панель приложения для отображения кнопки «Назад» при навигации по приложению - PullRequest
Новая
       10

Одна панель приложения для отображения кнопки «Назад» при навигации по приложению

0 голосов
/ 01 октября 2018

У меня есть файл 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>
    );
  }
}

Этот компонент имеет панель приложений и маршрутизатор с маршрутами внизу.Смысл панели приложения в том, что приложение тогда имеет только одну панель приложений во всем приложении.Изменяются только страницы под ним.

На моей странице контактов у меня есть кнопка, которая переходит на пользовательскую страницу с переданным параметром: 

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

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

1 Ответ

0 голосов
/ 03 октября 2018

Маршрутизатор React содержит withRouter компонент высшего порядка , который может предоставлять соответствующие реквизиты для компонента панели приложения.

Маршрутизатор React работает от библиотеки history.js, которая является абстракцией над браузеромИстория API.Хотя его можно использовать для навигации по истории браузера с помощью history.goBack(), он не будет хорошо работать при навигации по приложению в одиночку, поскольку история окон может содержать другие веб-сайты.

Компонент может выглядеть следующим образом (a 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>}
      </>
    );
  }
}

Он отслеживает изменения местоположения и перемещается по ним.Было бы более сложной задачей синхронизировать его с кнопками навигации по истории браузера (назад и вперед).

...