Как использовать response-router 4.0 для обновления текущего маршрута? не перезагружать всю страницу

У "response-router-dom" есть функция обновления здесь, но я не знаю, как вызвать этот метод, также их хорошо отформатированный документ не потрудился объяснить это.

У меня не работает window.location.reload(), потому что он стирает и магазин приложений. Я изменил некоторые данные, а затем необходимо перезагрузить маршрут с обновленными данными.

Я также прочитал это: https://github.com/ReactTraining/react-router/issues/1982 https://github.com/ReactTraining/react-router/issues/2243

эта тема точно обсуждает мой вопрос: https://github.com/ReactTraining/react-router/issues/4056

и до сих пор не знает, как это сделать. Эта базовая функция не должна требовать слишком больших усилий, но, затратив огромное количество усилий, я не могу перезагрузить текущий маршрут.

вот мой код:

@inject('store') @observer
export default class PasswordInput extends Component {
    constructor (props) {
        super(props)
        this.setPwd = this.setPwd.bind(this)
        this.submit = this.submit.bind(this)
    }

    componentWillMount() {
        this.case = this.props.store.case

        this.setState({refresh: false})
    }
    setPwd(e) {
        // console.log(e)
        this.case.pwd = e.target.value

    }
    submit() {
        console.log(this.props.caseId)
        this.setState({refresh: true})

    }

    render() {
        return (
            <Container>
                <div>{this.state.refresh}</div>
                { (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
                <br />
                <Grid columns="three">
                    <Grid.Row>
                        <Grid.Column key={2}>
                            <Form>
                                <label>Enter Password</label>
                                <input placeholder="empty"  type="text" onChange={this.setPwd} value={this.case.pwd}></input>                               

                                <Button name="Save" color="green" size="mini" 
                                style={{marginTop:'1em'}}
                                onClick={this.submit}>
                                    Submit
                                </Button>                               
                            </Form>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        )
    }
}

Ответ 1

Я решил эту проблему, вставив новый маршрут в историю, а затем заменив этот маршрут на текущий (или маршрут, который вы хотите обновить). Это заставит реагирующий маршрутизатор "перезагрузить" маршрут без обновления всей страницы.

if (routesEqual && forceRefresh) {
    router.push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

Маршрутизатор React работает с использованием истории браузера для навигации без перезагрузки всей страницы. Если вы вводите маршрут в историю, маршрутизатор реагирует на это и перезагружает маршрут. Важно заменить пустой маршрут, чтобы кнопка "Назад" не перенесла вас на пустой маршрут после его нажатия.

Согласно реагирующему маршрутизатору, похоже, что библиотека реагирующего маршрутизатора не поддерживает эту функцию и, вероятно, никогда не будет, поэтому вы должны принудительно выполнить обновление.

Ответ 2

У меня такая же проблема, и я не знаю, как это происходит. Мое решение состоит в том, чтобы выполнить следующие два шага.

  1. навести новый путь к истории
  2. сбросить все состояния

Затем DOM будет перенаправлен вашим маршрутом.

Ответ 3

Только это сработало для меня:

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace('/reload');
    setTimeout(() => {
      history.replace('/dashboard');
    });
  } else {
    history.push('/dashboard');
  }
};

Ответ похож на предыдущий, но мне нужно было добавить функцию setTimeout, чтобы она работала. В моем случае мне пришлось обновить текущий URL, щелкнув логотип, если я на странице /dashboard. Сначала идет дополнительный маршрут /reload (имя зависит от вас), а затем сразу возвращается. Страница становится белой менее чем за секунду и появляется с перезагруженными данными. Никакой перезагрузки в браузере не происходит, это все еще SPA, что хорошо.

Ответ 4

Вот мое решение с реакцией-маршрутизатора-дом "Redirect":

<Route key={props.notifications.key} path={props.notifications.path} exact render={() => <Redirect to={props.notifications.path + "/update"}/>}/>
<Route key={props.notifications.key + "/update"} path={props.notifications.path + "/update"} exact render={() => <props.notifications.component apis={props.notifications.apis}/>}/>

Ответ 5

Вы могли бы использовать этот маленький трюк. Нажмите новый путь в истории, например history.push('/temp'), и немедленно вызовите history.goBack()

Вот пример:

Создайте историю и передайте ее маршрутизатору:

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

затем где-нибудь в вашем приложении измените историю:

appHistory.push('/temp');
appHistory.goBack();

Таким образом, маршрут "останется" прежним и будет обновлен.

Ответ 6

отправить действие, которое у вас есть в состоянии инициализации.