on clicking Link no action takes place

Question

I am trying to pass props to the UpdatePassword component in React using Router, Link, which rendered UpdatePassword component . I am surprised, the link were working before but after some changes on server side, now when i click on it, nothing happens. Also if i display the page by adding url manually, the component is rendered but data sent is undefined. Kindly suggest what I can do here?

I have imported these in Dashboard component

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

and this is my return statement in same component

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

In my UpdatePassword component, props has state undefined.

You should not use `BrowserRouter` multiple times. Is this answer your question - https://stackoverflow.com/questions/56574315/home-page-overlaps-with-other-page-even-if-we-use-exact-with-using-react-route/56577223#56577223 — Alok Mali, Apr 07 '20 at 10:45
You can also check for more clarification - https://stackoverflow.com/questions/59488759/having-issues-trying-to-re-direct-user-based-on-state-using-react-router/59488919#59488919 — Alok Mali, Apr 07 '20 at 10:46
I edited and used only one router but link is still not working — Butterfly, Apr 07 '20 at 11:18

score 0 · Accepted Answer · answered Apr 07 '20 at 12:27

0

Please use -

<Route path='/updatePassword/parameter1/parameter2' component ={UpdatePassword}/>

Instead of this -

<Route path='/updatePassword' component ={UpdatePassword}/>

And Instead of this -

<li> <Link to ={{pathname :"/updatePassword", state :this.state}}>Update Password</Link> </li>

use this -

<li> <Link to={`/updatePassword/${parameter1}/${parameter2}`}>Update Password</Link> </li>

Then get your param values on your component like this -

let parameter1 = this.props.match.params.parameter1;
let parameter2 = this.props.match.params.parameter2;

answered Apr 07 '20 at 12:27

Alok Mali

2,821
2
16
32

I tried the method @alok-mali you suggested,the link changes but the component doesn't render. I have tried this ``` ``` – Butterfly Apr 08 '20 at 05:00
Yes, btw the original method which i posted also worked, it was some CSS which hindered with clicking. – Butterfly Apr 09 '20 at 10:02

on clicking Link no action takes place

1 Answers1