javascript - 单击链接时不会发生任何操作
问题描述
我正在尝试使用渲染 UpdatePassword 组件的路由器链接将道具传递给 React 中的 UpdatePassword 组件。我很惊讶,该链接之前有效,但在服务器端进行了一些更改之后,现在当我点击它时,什么也没有发生。此外,如果我通过手动添加 url 来显示页面,则会呈现组件但发送的数据未定义。请建议我可以在这里做什么?
我已经在仪表板组件中导入了这些
import {BrowserRouter as Router,withRouter,Link,Switch,Route} from 'react-router-dom'
这是我在同一组件中的返回语句
return <>
<Header/>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<Router>
<li> <Link to ={{pathname :"/updatePassword", state :this.state}}>Update Password</Link> </li>
<li> <Link to ={{pathname :"/updateUserInfo", state :this.state}}>Update User Details</Link> </li>
</Router>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Welcome {str2}</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
<Router>
<Route path='/updatePassword' component ={UpdatePassword}/>
</Router>
</div>
</div>
</div>
</div>
</div>
</>;
在我的 UpdatePassword 组件中,道具的状态未定义。
解决方案
请用 -
<Route path='/updatePassword/parameter1/parameter2' component ={UpdatePassword}/>
而不是这个 -
<Route path='/updatePassword' component ={UpdatePassword}/>
而不是这个 -
<li> <Link to ={{pathname :"/updatePassword", state :this.state}}>Update Password</Link> </li>
用这个 -
<li> <Link to={`/updatePassword/${parameter1}/${parameter2}`}>Update Password</Link> </li>
然后像这样在组件上获取参数值 -
let parameter1 = this.props.match.params.parameter1;
let parameter2 = this.props.match.params.parameter2;
推荐阅读
- java - JTextField setText() 方法不更新字段
- c - 如何将通用链表中的数据类型传递给 GDB 打印命令?
- python - 为什么在 RunPython 宏中使用 xlwings 时 pandas 不起作用
- java - 普通波兰表示法的 Java 计算器
- c - 快速的linux线程同步
- javascript - 无法使用 ngTable 创建可排序的多级主题
- javascript - 使用 object.keys 和 foreach 显示数据时出错,使用 document get element by id
- c - 试图在 C 中创建一棵 Huffman 树,但它一直在说 heap-buffer-overflow
- r - 如何在 R 中对 rowMeans 进行条件计算?
- javascript - 请求数据时从对象解析属性