单击链接时不会发生任何操作

Question

我正在尝试使用渲染 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 组件中，道具的状态未定义。

Answer 1

请用 -<Route&nbsp;path='/updatePassword/parameter1/parameter2'&nbsp;component&nbsp;={UpdatePassword}/>而不是这个 -<Route path='/updatePassword' component ={UpdatePassword}/>而不是这个 -<li>&nbsp;<Link&nbsp;to&nbsp;={{pathname&nbsp;:"/updatePassword",&nbsp;state&nbsp;:this.state}}>Update&nbsp;Password</Link>&nbsp;</li>用这个 -<li>&nbsp;<Link&nbsp;to={`/updatePassword/${parameter1}/${parameter2}`}>Update&nbsp;Password</Link>&nbsp;</li>然后像这样在组件上获取参数值 -let&nbsp;parameter1&nbsp;=&nbsp;this.props.match.params.parameter1; let&nbsp;parameter2&nbsp;=&nbsp;this.props.match.params.parameter2;