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

Posted 2023-02-16

【中文标题】如何使用 preact-router 以编程方式导航？

【英文标题】：How to programmatically navigate with preact-router?

【发布时间】：2017-07-31 01:21:30

【问题描述】：

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

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

【参考方案1】：

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

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

【讨论】：

实际上你也非常接近原来的方法，只是 replaceState() 修改当前历史条目而不是添加新条目，所以 preact-router 看不到它（修改不会触发事件）。你可以这样做：history.pushState(null, null, '/#/redirectedUrl')

@JasonMiller 实际上，即使使用history.pushState(null, null, '/#/url');，我也无法让 preact-router 路由。这可能是时间问题/我从哪里拨打电话？我目前正在我的组件的render()-method 中进行此调用。

现在我意识到我把你引到了那里——pushState() 也不会触发任何事件，所以路由器也不会响应。您使用的location.hash 分配可能是最好的，或者如果您想保持抽象，您可以从preact-router 导入route 函数并调用route('/url')。

是的，这将很好地抽象出我正在使用的历史记录。我会更新我的答案。

【参考方案2】：

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

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

这将在历史记录中创建一个pushState（即）它将为此网址创建一个新条目

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

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