Как программно ориентироваться с preact-router?

Я пытаюсь понять, как структурировать интерфейсную часть веб-приложения с помощью машинописного текста, предварительного действия и предварительного маршрутизатора. Я прошел долгий путь, но мне все еще нужно выяснить, как программно перемещаться (перенаправлять) с помощью preact-router. Я могу сделать history.replaceState(null, null, '/#/redirectedUrl');, но пока это меняет URL-адрес в адресной строке, preact-router не направляет на новый URL-адрес.

Каков предпочтительный способ программной навигации при использовании preact-router?


typescript javascript preact
person David Nordvall    schedule 09.03.2017    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Импорт функции route из 'preact-router' - это правильный путь:

import { route } from 'preact-router';
route('/url/to/rout/to');
person David Nordvall    schedule 15.03.2017
comment
На самом деле вы тоже были довольно близки со своим исходным подходом, просто replaceState() изменяет текущую запись в истории вместо добавления новой, поэтому preact-router не может ее видеть (изменение не запускает события). Но вы можете сделать это: history.pushState(null, null, '/#/redirectedUrl') - person Jason Miller; 16.03.2017
comment
@JasonMiller на самом деле я не могу заставить preact-router маршрутизировать даже при использовании history.pushState(null, null, '/#/url');. Может быть, дело в сроках / откуда я звоню? В настоящее время я делаю этот вызов в render()-методе моего компонента. - person David Nordvall; 16.03.2017
comment
Теперь я понимаю, что я вроде как сбил вас с пути - pushState() также не запускает никаких событий, поэтому маршрутизатор тоже не будет реагировать на это. Присваивание location.hash, с которым вы пошли, вероятно, лучше всего, или, если вы хотите сохранить абстрагирование, вы можете импортировать функцию route из preact-router и вызвать route('/url'). - person Jason Miller; 16.03.2017
comment
Да, это будет красиво абстрагироваться от того, какую историю я использую. Я обновлю свой ответ. - person David Nordvall; 18.03.2017

arrow_upward
2
arrow_downward

Вы можете сделать это двумя способами в зависимости от ваших потребностей.

import { route } from 'preact-router';
route('url');

Это создаст pushState в истории (т. Е.), Он создаст новую запись для этого URL-адреса.

import { route } from 'preact-router';
route('url', true);

Это создаст replaceState в истории (т. Е.), Это заменит текущую запись URL-адреса страницы в истории на URL-адрес, на который будет выполняться маршрутизация. Вы можете использовать это в таких случаях, как, например, при маршрутизации с экрана входа в систему на ваш домашний экран / экран дашбаорда, где при нажатии кнопки возврата браузера вы не хотите, чтобы пользователь возвращался к экрану входа в систему после того, как пользователь вошел в систему ( таким образом заменив запись для входа в систему на запись в дашбаорде).

person Kowsalya    schedule 07.06.2018