Кнопка перехвата / обработки браузера в React-router?

Я использую вкладки Material-ui, которые управляются, и я использую их для ссылок (React-router), таких как:

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
    <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
  <Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

Если я currenty visting dashboard / data, и я нажимаю кнопку "Назад" браузера Я иду (например) на панель мониторинга/пользователей, но выделенная вкладка все еще остается на панели мониторинга/данных (значение=2)

Я могу изменить, установив состояние, но я не знаю, как обрабатывать событие при нажатии кнопки "Назад" браузера?

Я нашел это:

window.onpopstate = this.onBackButtonEvent;

но это называется каждый раз, когда состояние изменяется (не только на событие кнопки Назад)

9
javascript material-ui react-router reactjs

4 ответов

вот как я закончил это делать:

componentDidMount() {
    this._isMounted = true;
    window.onpopstate = ()=> {
      if(this._isMounted) {
        const { hash } = location;
        if(hash.indexOf('home')>-1 && this.state.value!==0)
          this.setState({value: 0})
        if(hash.indexOf('users')>-1 && this.state.value!==1)
          this.setState({value: 1})
        if(hash.indexOf('data')>-1 && this.state.value!==2)
          this.setState({value: 2})
      }
    }
  }

спасибо всем за помощь lol

8

это немного старый вопрос, и вы, вероятно, уже получили свой ответ, но для таких людей, как я, которые нуждались в этом, я оставляю этот ответ.

использование react-router сделало работу простой как таковой:

import { browserHistory } from 'react-router';

componentDidMount() {
    super.componentDidMount();

    this.onScrollNearBottom(this.scrollToLoad);

    this.backListener = browserHistory.listen(location => {
      if (location.action === "POP") {
        // Do your stuff
      }
    });
  }

componentWillUnmount() {
    super.componentWillUnmount();
    // Unbind listener
    this.backListener();
}
6

версия 3.x API маршрутизатора React имеет набор утилит вы можете использовать, чтобы выставить событие кнопки "Назад", прежде чем событие регистрируется в истории браузера. Сначала вы должны обернуть свой компонент в withRouter() компонент более высокого порядка. Затем вы можете использовать setRouteLeaveHook() функция, которая принимает любой route объект с допустимым path свойство и функция обратного вызова.

import {Component} from 'react';
import {withRouter} from 'react-router';

class Foo extends Component {
  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
  }

  routerWillLeave(nextState) { // return false to block navigation, true to allow
    if (nextState.action === 'POP') {
      // handle "Back" button clicks here
    }
  }
}

export default withRouter(Foo);
5

я использовал withrouter hoc, чтобы получить History prop и просто написать метод componentDidMount ():

componentDidMount() {
    if (this.props.history.action === "POP") {
        // custom back button implementation
    }
}
0