问题标签 [react-router-dom]

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 回答
13433 浏览

javascript - 如何在路由更改时卸载组件

我在给定的路线上有一个组件,比如说app.com/cars/1

我有一个侧边栏,其中包含指向不同汽车的链接,例如/cars/2/cars/3

我遇到的问题是当您更改链接时,例如 go from cars/1to cars/2,组件没有卸载,我被componentWillReceiveProps解雇了。如果我使用不同的组件转到另一个页面,例如/trucks,该组件已卸载并且一切正常。

路由更改时如何卸载组件?我有各种状态和通量的东西,我想为下一辆车清除。或者如果不卸载,人们是否有处理这类问题的典型方式?我无法想象这不是很常见。

(注意我使用的是反应路由器)

0 投票
1 回答
3429 浏览

reactjs - react-router-dom,是否有用于代码拆分的`getComponent`方法?

我试图弄清楚代码拆分如何与webpack2.x和一起使用react-router-dom

"react-router-dom": "^4.0.0"

但是我阅读了文档并没有找到像这样使用的方法:

getComponent还在工作吗?

我发现react-router-dom文档只是给你一些例子,没有解释。

我看到react-router的是v4.0.0-beta.8,也许我应该react-router-dom稍后使用?

0 投票
2 回答
9684 浏览

javascript - 在 React Router v4 中获取未定义的组件

刚升级到react-router-dom 4.0.0。我所有的组件都是常规的classes 或胖箭头。它们都是使用导出的export default ThatComponent。然而我得到了这个:

未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记从定义组件的文件中导出组件。检查Router.

为什么<Match>组件认为其他组件未定义?

0 投票
8 回答
109931 浏览

reactjs - 如何在 react-router v4 中解析查询字符串

在 react-router v3 我可以访问它props.location.query.foo(如果当前位置是?foo=bar

react-router-dom@4.0.0 props.location只有props.location.searchwith 是一个字符串,如?foo=bar&other=thing.

也许我需要手动解析和解构该字符串以找到fooor的值other

截图console.log(this.props):( 在此处输入图像描述 注意?artist=band我想从这里获取值artist的值band

0 投票
2 回答
5421 浏览

reactjs - React Router with a custom root and a base component

I have an integrated React app (it's integrated into an existing Flask app) and the entry to the React app is not on the site's root. The first URL that fires the React app is the '/active-items'.

However, other routes do not necessarily extend that path. Some of the routes are '/active-items/item/', while some are completely different, like '/item-selection'.

With that in mind, I'm trying to set up my React Router to provide a base component for each of those routes. Basically, any route that fires should have the 'App' component as the base component, and inside App component I have '{props.children}'.

I've tried several iterations of how the routes should look like, but with no luck.

My latest iteration is this:

App is rendered, but ActiveItems is not. Any ideas how should I approach this?

EDIT: I'm using react-router-dom v4.0.0

0 投票
1 回答
350 浏览

react-router - react-router v4 替代 v2 match({routes, location}, (err, redirectLocation, renderProps) => {})

我想知道 react-router v4 是否支持匹配。文档是这样说的,但是我不断得到TypeError: (0 , _reactRouter.match) is not a function或者是否有替代方案可以满足 match () 所做的所有事情。

0 投票
4 回答
8839 浏览

reactjs - React Router v4 在父级上设置 activeClass

不太熟悉反应路由器,但我需要 NavLink 的功能来在父li元素上设置活动类,而不是a元素。

为了实现这一点,我只是查看了源代码NavLink并将其复制到一个新元素中。(使用 typescript 的示例,但与 js 几乎相同)

然后是用法:

我正在使用一个HashRouter并且由于某种我无法弄清楚的原因,当路线改变时它不会更新,只有当我硬“刷新”页面时它才会更新它应该如何更新。

我相信它永远不会更新,因为道具永远不会改变?所以它不知道更新自己?

我怎样才能得到这个更新?还是我的问题在其他地方?

0 投票
1 回答
11259 浏览

reactjs - 从搜索表单重定向到reactjs中的结果页面

我目前正在开发我的第一个 reactjs 应用程序,并且在使用 react-router-dom 从搜索组件导航到结果组件时遇到了困难。

搜索组件接受来自用户的条目,使用 axios 执行获取请求并更新其结果状态。

结果当前直接显示在搜索组件下方,但我想将结果重定向到具有不同 url 的新页面。两个页面必须不同,因为它们具有完全不同的结构和样式,并且必须指向不同的 url。

是否可以使用反应路由器将搜索组件的结果转发到结果组件?我也对其他不基于反应路由器的解决方案持开放态度。

0 投票
6 回答
68719 浏览

javascript - react-router-dom v4 中的多个嵌套路由

我需要 react-router-dom 中的多个嵌套路由

我正在使用 react-router-dom v4

我有我的

我需要组件像这样渲染

Home 组件包含 Page1、Page2 和 Page3 组件共有的 Header 组件,但在 Login 和 About 中不存在。

我的 js 代码是这样的

我希望登录组件只显示在 /login 当我请求 /page1、/page2、/page3 时,它们应该分别包含 Home 组件和该页面的内容。

相反,我得到的是呈现的登录组件,并且在该页面1 的组件下方呈现。

我很确定我错过了一些非常微不足道的事情或在某个地方犯了一个非常愚蠢的错误,并且会感谢我能得到的所有帮助。在过去的两天里,我一直被这个问题困扰。

0 投票
1 回答
3645 浏览

javascript - 通过在 react-router 的地址栏上输入它的地址直接访问路由器

使用 react-router (V4) 有两种“主要”方式;第一种方法是使用哈希路由器,您可以通过在浏览器的地址栏上键入地址直接访问该地址,但您必须在 URL 中添加 #,另一种方法是使用 BrowserRouter,它具有漂亮且用户友好的 URL 结构,但您可以t 直接键入地址以呈现路线。

我如何配置 HashRouter 以在没有 # 的情况下工作或配置 BrowserRouter 以直接使用 URL 输入?.htaccess 可以吗?如何?


[在这种类型中,它与 # 标记一起使用。例如: localhost:2000/#/projects ]


另一种类型:

[并且在这种类型中它没有#标记也可以很好地工作,但是无法直接在浏览器的地址栏上加载它。]