问题标签 [react-router]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
28580 浏览

javascript - React.js 使用不在 URL 中的路由器传递参数

嗨,我想从一页移动到另一页并传递参数searchtype. 我可以通过在 URL 中没有这些参数的反应路由器来实现这一点吗?

我正在查看此https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments和使用的解决方案,<RouteHandler {...this.props}/>但在我将参数传递给 url 之前它不起作用.

有什么解决办法吗?

编辑 1. 路线:

0 投票
53 回答
611556 浏览

javascript - 手动刷新或写入时,React-router url 不起作用

我正在使用 React-router,当我单击链接按钮时它工作正常,但是当我刷新我的网页时它不会加载我想要的内容。

例如,我进去了localhost/joblist,一切都很好,因为我按链接到达这里。但是如果我刷新网页,我会得到:

默认情况下,它不是这样工作的。最初我有我的 URLlocalhost/#/并且localhost/#/joblist它们工作得非常好。但我不喜欢这种 URL,所以试图删除它#,我写道:

这个问题不会发生localhost/,这个总是返回我想要的。

编辑:这个应用程序是单页的,所以/joblist不需要向任何服务器询问任何内容。

EDIT2:我的整个路由器。

0 投票
0 回答
528 浏览

javascript - react.js 中的刷新站点不使用查询参数

在浏览器中按 F5 时出现问题。

我在 react-router 中定义了路由:

<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler={RealEstatesPage}/>

并在 node.js 上路由

app.use(route.get("/realestatesPrefiltered/:search/:type", getLayout));

但是当我按 F5 时,我看到空白页,为什么?

我有另一条没有参数的路线。

<Route name="realestates" handler={RealEstatesPage}/>

app.use(route.get("/realestates", getLayout)); 一切正常。

0 投票
1 回答
8174 浏览

javascript - react-router transitionTo(routeNameOrPath, [params[, query]]) 从 URL 隐藏查询

我正在发射一种方法: this.transitionTo('route', {},{search: this.state.search, type: this.state.type});

在 URL 中传递查询参数http://...route?search=%param10&type=param2

是否有等效的方法可以传递这些参数而不在 URL 中打印?

0 投票
0 回答
679 浏览

javascript - 谷歌地图 - 显示 div 后调整事件大小不填充 div

我有一个单页应用程序,使用 reactjs 和 react-router。我开发了一个地图组件,如果我尝试清理组件上的地图并在组件上重新安装并重建它,那么谷歌地图当然会从一个屏幕到另一个屏幕发生内存泄漏。所以我尝试了这种方法:

销毁地图实例的正确方法是什么

并且重新使用地图实例和节点结合过度的清理措施效果很好并且稳定了事情。为了清理,我

  • 在每个标记、地图、窗口和文档上调用 clearInstanceListeners
  • 在任何标记上将地图设置为空
  • 删除组件上的 this.map 然后将其设置为 null
  • 删除 this.markers 然后将其设置为空数组

我此时遇到的问题是,当我触发调整大小时,它不是调整大小。在阅读了其他几篇文章后,并确保我在显示 div 后触发,它不会调整大小。但是,我有一个绑定到 window.onresize 的调整大小函数,并且注意到在调整窗口大小之后,以及第二次调用该函数时,地图会调整大小并居中。这是那个功能:

以及窗口调整大小的功能:

我对 react 的渲染调用只返回一个 div,稍后在 mount 时我自己附加了地图 div。

该组件是一个嵌套组件。

请让我知道是否有任何其他代码可以提供帮助。我当然是使用最新的google maps api,直接使用。

0 投票
1 回答
9903 浏览

reactjs - React-router: Uncaught ReferenceError: Router is not defined

I'm following React Router Guide but I'm not even getting to make the simplest example to work. It says Uncaught ReferenceError: Router is not defined.

I'm including these 3 JavaScript files through cdnjs:

And the script the triggers the exception is this:

Am I missing anything? Is Router defined somewhere else? That's weird because it's not stated in the docs.

0 投票
1 回答
960 浏览

javascript - 如何在它进入视图之前识别 react-router Handler is NotFound?

我正在做一个小样板项目,使用 node & express 使用 ReactJS 进行服务器端渲染。

我想知道如何识别Handler我的回调中的变量何时代表NotFound工厂,这样我就可以用 express抛出404 错误。就像是:res.status(404)

如果您想全面了解该文件,请随时访问其在 github 上的页面: https ://github.com/sergiocruz/react-boilerplate/blob/master/server.js

如果您对此感到好奇,也可以在这里浏览整个项目:https ://github.com/sergiocruz/react-boilerplate

0 投票
1 回答
4206 浏览

javascript - ReactJS 重定向

我在我的应用程序中使用ReactJSreact-router。我需要做下一件事:当用户打开页面时 - 检查他是否登录,如果是,则重定向到/auth页面。我正在做接下来的事情:

在浏览器 url 中,它确实会重定向到/auth,渲染/auth页面,然后用当前组件覆盖它。所以这里的问题是:如何取消当前组件的渲染,或者如何以其他方式进行重定向?谢谢。

0 投票
2 回答
812 浏览

javascript - 避免传递请求对象

我正在编写一个 React 应用程序(Express 服务器),它使用共享(“同构”)代码库在客户端 + 服务器上呈现。在某些情况下,当服务器是渲染器时,我想访问请求对象,而不必到处传递它。由于节点一次响应一个请求,利用缓存变量是否安全,确保在发送响应之前重置它?

这行得通,但有人能告诉我为什么这是一个好主意或坏主意吗?...

服务器.js

请求-store.js

解决.js

0 投票
1 回答
11920 浏览

javascript - react.js - 处理固定页眉和页脚的 React-router

我有使用 react-router 的 React.js 应用程序,我对我当前的路由处理有疑问。

设计如下,常见的移动布局,固定的页眉和页脚,中间的内容:

在此处输入图像描述

如果它们是静态的,我可以简单地创建这样的结构:

但有时它们会从一个页面更改为另一个页面,例如:

  • 标题和按钮文本
  • 按钮数量
  • 某些页面上没有页脚

将它们放在视图控制器中并每次重新渲染是否更好RouteHandler