如何以编程方式使用 preact-router 进行导航？

Question

我正在尝试弄清楚如何使用 typescript、preact 和 preact-router 构建 Web 应用程序的前端部分。我已经走了很长一段路，但我仍然需要弄清楚如何使用 preact-router 以编程方式导航（重定向）。我可以做 history.replaceState(null, null, '/#/redirectedUrl');，但是虽然这会更改地址栏中的 URL，但 preact-router 不会路由到新的 URL.

使用 preact-router 时以编程方式导航的首选方式是什么？

Answer 1

从 'preact-router' 导入函数 route 是正确的方法：

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

Answer 2

您可以根据需要通过两种方式进行

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

这将在历史记录中创建一个 pushState（即，）它将为此 url

创建一个新条目

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

这将在历史记录中创建一个 replaceState（即，）这将用您的 url 替换历史记录中的当前页面 url 条目将被路由到。您可以在以下情况下使用此功能，例如，当从登录屏幕路由到 home/dashbaord 屏幕时，在单击浏览器后退按钮时，您不希望用户在用户登录后返回登录屏幕在（因此用您的仪表板条目替换登录条目）。

如何以编程方式使用 preact-router 进行导航？

How to programmatically navigate with preact-router?

javascript

typescript

preact