单击 Link 时没有任何操作发生

Question

我正在尝试使用路由器将道具传递给 React 中的 UpdatePassword 组件，Link，它呈现了 UpdatePassword 组件。我很惊讶，link 之前可以正常工作，但在服务器端进行一些更改后，现在当我单击它时，没有任何反应。此外，如果我通过手动添加 url 来显示页面，则会呈现组件但发送的数据未定义。请建议我在这里可以做什么？

我已经在 Dashboard 组件中导入了这些

import {BrowserRouter as Router,withRouter,Link,Switch,Route}  from 'react-router-dom'

这是我在同一组件中的 return 语句

   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 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;

单击 Link 时没有任何操作发生

on clicking Link no action takes place

javascript

routing

reactjs