【问题标题】:React Router Without Changing URL在不更改 URL 的情况下反应路由器
【发布时间】:2017-02-04 22:00:49
【问题描述】:

我需要在不更改 URL 的情况下工作的路由。

在我自己实现这个之前,我尝试通过反应路由器寻找一些东西。看到有这么一个东西叫createMemoryHistory:

createMemoryHistory([options])

createMemoryHistory 创建一个内存中的历史对象,它不会 与浏览器 URL 交互。这在您需要时很有用 自定义用于服务器端渲染的历史对象,用于 自动化测试,或者当你不想操纵 浏览器 URL,例如当您的应用程序嵌入到 iframe 中时。

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

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

【问题讨论】:

标签: javascript reactjs react-router


【解决方案1】:

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

const memoryHistory = createMemoryHistory(options);

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

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

本文介绍了如何在 React Router 中使用不同的提供程序:Histories

【讨论】:

  • 谢谢。目前还不清楚(也从文章中)routes 中的内容以及如何声明它们。例如,通常的实现是:&lt;Route pathname="home" component={ Home } /&gt;,您使用&lt;Link to="/home"&gt;Home&lt;/Link &gt; 导航。但是现在不应该有路径名。我试图简单地切换历史记录并保持其他历史记录不变,但它失败了。
  • 实际上,我正在另一个项目上再次测试它,它似乎有效。我会继续测试。
  • routes={routes} 只是定义路由的另一种方式。你也可以使用&lt;Route&gt; 组件,没关系。
  • 原来我尝试过的原始项目有一些问题,这适用于新项目。谢谢
【解决方案2】:

React Router 4 有一个 MemoryRouter

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

&lt;Router&gt; 将您的“URL”历史记录在内存中(不 读取或写入地址栏)。在测试和非浏览器中很有用 像 React Native 这样的环境。

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

【讨论】:

  • 注意:如果您使用 MemoryRouter,您将无法获得返回按钮功能
猜你喜欢
  • 2019-03-28
  • 2017-12-11
  • 1970-01-01
  • 2017-06-24
  • 2014-06-28
  • 1970-01-01
  • 1970-01-01
  • 2018-07-10
  • 1970-01-01
相关资源
最近更新 更多