Принуждение React-Router загружать страницу, даже если мы уже на этой странице

есть ли способ заставить React-Router <Link> чтобы загрузить страницу с пути, даже если текущее местоположение уже которую страницу? Я не могу найти никакого упоминания об этом в документах react-router.

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

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

, нажмите <Link> ничего не делает, потому что react-router видит, что мы уже на странице "применить", и поэтому не размонтирует текущий страница, чтобы затем смонтировать другой.

есть ли способ силу это чтобы отключить текущую страницу перед затем установить запрашиваемую страницу, даже если на странице уже якобы? (через <Link> свойства например?)

6
react-router

5 ответов

исправление, которое я использовал для решения моей маленькой потребности вокруг этого, должно было пройти в state свойство в ссылку, как так <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>. Затем я могу проверить это в целевом компоненте (скажем <Page />) componentWillReceiveProps вот так:

componentWillReceiveProps(nextProps){
  if (nextProps.location.state === 'desiredState') {
    // do stuffs
  }
}

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

2

не хорошее решение, потому что оно заставляет полное обновление страницы и выдает ошибку, но вы можете вызвать forceUpdate () с помощью обработчика onClick, такого как:

<Link onClick={this.forceUpdate} to={'/the-page'}>
    Click Me
</Link>

все что я могу сказать-это работает. Я сам застрял в подобной проблеме и надеюсь, что у кого-то еще есть лучший ответ!

React router Link не вызывает обновление компонента во вложенных маршрутах

6

в компоненте маршрута укажите случайный ключ.

<Route path={YOURPATH} render={(props) => <YourComp {...props} keyProp={someValue} key={randomGen()}/>} />

когда react увидит другой ключ, они вызовут rerender.

2

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

<Link onClick={this.reloadRoute()} to={'/route-to-refresh'}>
    Click Me
</Link>

let reloadRoute = () => {
    router.push({ pathname: '/empty' });
    router.replace({ pathname: '/route-to-refresh' });
}

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

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

-1

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

/**
 * @param {object} nextProps new properties
 */
    componentWillReceiveProps = (nextProps)=> {
        if (nextProps.location.key !== this.props.location.key) {
            window.location.reload();
        }
    };
-2