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

Question

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

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

Answer 1

route从导入函数'preact-router'是要走的路：

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 条目。您可以在以下情况下使用此功能，例如，从登录屏幕路由到主/仪表板屏幕时，单击浏览器后退按钮时，您不希望用户在用户登录后返回登录屏幕（从而用您的仪表板条目替换登录条目）。