在不更改 URL 的情况下响应路由器

IT技术 javascript reactjs react-router
2021-04-21 20:52:13

我需要在不更改 URL 的情况下进行路由

在我自己实现这个之前,我试图通过react-router寻找一些东西。我看到有这样一个东西叫做createMemoryHistory

createMemoryHistory([选项])

createMemoryHistory 创建一个不与浏览器 URL 交互的内存历史对象。当您需要自定义用于服务器端呈现的历史对象、自动化测试或不想操作浏览器 URL 时,例如当您的应用程序嵌入到 iframe 中时,这非常有用。

但是在这一段之外没有任何使用示例,我在任何地方都找不到它的用法,即:如何使用Link组件在没有路径名的情况下导航,如果不是路径名,我应该通过哪个参数进行路由等。

这是否适合我的需求,还是我必须自己实现路由器?

2个回答

MemoryHistory 是一个“历史提供者”,你可以像这样提供给 React Router:

const memoryHistory = createMemoryHistory(options);

// In your Router configuration
<Router history={memoryHistory} routes={routes} />

除了初始配置之外,其他一切都应该与常规浏览器历史记录完全相同。

这篇文章描述了如何在 React Router 中使用不同的提供者:Histories

原来我试过的原始项目有一些问题,这在一个新项目中有效。谢谢
2021-05-24 20:52:13
实际上,我正在另一个项目上再次测试它,它似乎有效。我会继续测试。
2021-05-28 20:52:13
routes={routes}只是定义路线的另一种方式。您也可以使用<Route>组件,这应该无关紧要。
2021-05-30 20:52:13
谢谢。目前还不清楚(也从文章中)包含什么routes以及如何声明它们。例如,通常的实现是:<Route pathname="home" component={ Home } />并且您使用<Link to="/home">Home</Link >. 但现在不应该有路径名。我试图简单地切换历史记录并保持其他历史记录完好无损,但它失败了。
2021-06-16 20:52:13

React Router 4 有一个 MemoryRouter

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

一个<Router>在内存让你的“URL”的历史记录(不读或写到地址栏)。在测试和非浏览器环境(如 React Native)中很有用。

https://reacttraining.com/react-router/web/api/MemoryRouter

注意:如果您使用 MemoryRouter,您将无法获得返回按钮功能
2021-05-24 20:52:13