问题标签 [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 投票
1 回答
12853 浏览

reactjs - React+redux-form - 提交后重定向

我正在使用 react-router-dom v4 。表单提交成功后如何重定向到页面?

我跟着那个教程LINK。然后我创建了自己的提交函数

在评论的地方应该有一个重定向功能,但我不知道该怎么做。我试着放在那里: <Redirect to="/pageAfterSubmit" push />但什么也没发生。

我在index.js中的浏览器路由器如下所示:

谢谢你的帮助。

0 投票
1 回答
1019 浏览

javascript - React Router 和 Redux - 初始加载数据

我在网站上查看了很多关于我遇到的问题的问题和答案。

我使用 React、React Router 和 Redux 进行常规设置。我的顶级组件如下。

在我的 App.jsx 中,我有以下代码:

我的 Main.jsx

最后我有我的 Grouping.jsx 和 GroupingContainer.jsx

GroupingContainer.jsx

在请求之后,它会触发另一个操作,将返回的分组添加到存储中并添加到一组组中state.main.groups

我有2个问题。当我从根路径浏览到其中一个分组时,以下流程:

我收到消息:Uncaught TypeError: Cannot read property 'name' of undefined在 API 请求完成并填充之前的一秒钟内{grouping.name},当我在分组 URL 上完全刷新页面时http://localhost:3000/#/groupings/19,应用程序根本不会加载并给它们相同的Uncaught TypeError: Cannot read property 'name' of undefined

我已经使用 React 大约 2 个月了,并且真正开始在组件加载时使用 API 请求。我真的不知道在哪里正确放置 API 请求以防止视图在完成之前呈现并出错。

任何帮助,将不胜感激!

谢谢!

0 投票
2 回答
8599 浏览

reactjs - 反应路由器 URL 参数不起作用

我无法让 React Router 中的 URL 参数功能正常工作,任何见解都会有所帮助!我尝试使用“react-router-dom”而不是“react-router”,但我得到了这个人得到的错误:https ://github.com/ReactTraining/react-router/issues/1799

当我执行 localhost:8000 时,该应用程序正常工作。当我转到 localhost:8000/123 时,浏览器按原样呈现index.html ,没有任何反应。Express 会干扰 React 吗?在 Express 中,我拥有以下内容:

这是我的main.js

我的routes.js

我的Home组件在不同的文件中定义如下(省略了所有导入和生命周期函数):

根据要求,我的index.html文件:

由于我的webpack 配置,html 没有捆绑作为脚本标记(捆绑已注入!)(以下代码只是配置的一部分):

0 投票
1 回答
2151 浏览

javascript - React-Router v4 分离 Link 和 Route 路径元素

(为清楚起见更新)我的应用程序具有以下结构:

我的想法是<Navigation>隔离元素,并将其导入父级<Header>(以及后来的站点地图)。然后将所有组件暂存到父组件中,父组件被<Layout>馈送到<div id="root">

我的 /pages/ 组件的内容被成功调用并使用下面的代码呈现。但是,此页面内容呈现在我的<header>元素内部,从而破坏了页面层次结构。

我的意图是让设备在父组件<Switch>中呈现 /pages/组件。<Stage>

任何将<Switch>元素移动到<Stage>组件的尝试都会导致整个应用程序无法加载/渲染。

<Stage>我的问题是:当从组件中选择时,如何让路由器在我的组件中呈现所需的 /page/ 组件<Navigation>

由于所有reacttraining.com示例都是单页的,我正在努力确定我是否在假设我的应用程序应该如何以最佳方式构造时犯了逻辑错误,或者在使用 react 重新创建两个元素之间的关系时是否犯了编程错误-路由器 v4。

0 投票
2 回答
1996 浏览

reactjs - 如何在路由(react-route-dom)reactjs中将状态从父组件传递给子组件

我是 React.js 的新手,并使用react-router-dom. 其中我有两个组件:

  1. 仪表板(dashboard.js)
  2. 信息(信息.js)

和一个主要组件应用程序App.js,我在其中使用react-router-dom.

我可以将道具从 App 组件发送到仪表板和信息,但我想发送状态。有人可以帮助我,如何将状态从父组件发送到子组件?

0 投票
1 回答
141 浏览

reactjs - 从 v3 迁移到 v4 react-router 时出现错误

我决定使用 react-router v4 而不是 v3 并更改我的路径,以便它们与路由器的 v4 和 redux 一起使用,但我收到以下错误(我使用 export default 导出所有组件并且没有忘记导出任何内容)。我的代码有什么问题?

元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出您的组件。

我试图打开这个 v3 路由器代码,它有效:

像这样进入 v4 代码:

应用程序.js:

店铺:

0 投票
1 回答
10911 浏览

javascript - React Redux 和 react-router-dom

我正在学习 Redux,随着 react-router-dom 的新变化,我有点困惑。我有这些文件:

索引.js

应用程序.js

最后,Main.js

这段代码工作得很好,当我去 localhost:3000/list 或者如果我点击它就可以了。

但是我觉得我做错了什么,正确的方法应该是包裹到里面的 index.js

所以我应该做这样的事情:

document.getElementById('root'),

然后在 Main.js

但是,当我这样做时,如果我直接访问 localhost/list 链接,我可以看到该组件,但如果我点击任何链接,则不会发生任何事情。

我对如何正确使用带有 redux 的路由器感到困惑。这是我在 reducers/index.js 中使用的代码

我在网上和 youtube 上研究了这个网站和许多教程,但我不明白我的代码是否正确,我知道它有效,但我有兴趣了解这是否是正确的方法。谢谢!

0 投票
2 回答
1180 浏览

javascript - 当我点击一个 React Router 4.1.1 时不呈现

我只是想点击一个组件并重新渲染需要渲染的内容。但我根本无法存档。这是我到目前为止所拥有的:

Index.js(这是我尝试存储所有路线的地方)

Header.JS(我有链接标签设置的地方)

截至目前,当我手动转到时/,它会呈现Main组件,当我手动转到时/login,它会呈现Login组件。

但是,当我单击该<Link> 组件时,它不会呈现,它只是将 URL 更改为,/login反之亦然。

我想知道这个问题是否有任何解决方案?

编辑 1

Main.js 代码

登录.js

为了澄清起见,我尝试了

这仍然行不通。有什么解决办法吗?

0 投票
3 回答
7233 浏览

reactjs - React Router 4.x - PrivateRoute 在连接到 Redux 后不起作用

示例https://reacttraining.com/react-router/web/example/auth-workflow中提供的 PrivateRoute 在与 Redux 连接后无法正常工作。

我的 PrivateRoute 看起来与原始版本几乎相同,但仅连接到 Redux并使用它而不是原始示例中的 fakeAuth。

用法和结果:-

  1. 不工作但希望和期望工作
    • <PrivateRoute path="/member" component={MemberPage} />
  2. 工作但不希望这样使用
    • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
  3. 在职的。只是工作,但根本不想使用。从这一点的理解是,如果您将原始 PrivateRoute 连接到 Redux,您需要传递一些额外的道具(任何道具)以使 PrivateRoute 工作,否则它不起作用。任何人,请对这种行为给出一些提示。这是我的主要问题
    • <PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />
0 投票
0 回答
701 浏览

javascript - react-router v4 不会触发路由

我正在尝试使用 react-router v4,由于某种原因,当我使用普通链接和 Link 组件更改路由时,该路由不会触发,但如果我直接在 URL 栏中访问或只是刷新页面,该路由中的组件渲染组件。检查后,我看到上下文已更新,但道具未更新。如下图所示: 代码情况 从“/about”路由开始,单击“/projects”链接(AboutMe 组件仍然在 Switch 内,而不是 Projects 组件的更改)。路由定义如下:

我已经尝试过使用 BrowserRouter、HashRouter 和仅使用 Router 组件,并且在 Switch 组件中包含/不包含路由(似乎没有任何效果)。我已经在教程、文档、其他 stackoverflow 问题和 repo 问题中搜索了两天,但到目前为止一无所获,所以我来了!:)

我正在使用这些软件包:

  • 反应 v15.5.4
  • 反应路由器-dom v4.1.1

提前致谢!\o