0

I'm trying to get my button to navigate to an edit page for Server information I'll be providing to the route with Redux. This is written with typescript too, if that makes a difference?

I've gotten it to work if I wrap the button text like so:

<button onClick={this.handleEditCurrentServer}>
    <Link to={`/servers/${encodeURIComponent(this.props.IServer.name)}/edit`}>
        Edit
    </Link>
</button>

But the problem is that I don't want the text to be what's clicked, I want the whole button to be clickable for this route to work.

So I've tried it like this:

<Link to={`/servers/${encodeURIComponent(this.props.IServer.name)}/edit`}>
    <button onClick={this.handleEditCurrentServer}>
        Edit
    </button>   
</Link>

But unfortunately it's not using the link anymore. Is there a way to possibly add to the buttons onClick attribute?

I've hunted around on SO, and Reddit, but haven't found anything pertaining to this problem in particular.

EDIT: This was marked as a possible duplicate of React-router: How to manually invoke Link? but I've tried those answers, and they aren't working.

glitchwizard
  • 421
  • 1
  • 6
  • 23
  • 1
    If you're using a Link, why are you using onClick? – SLaks Apr 16 '19 at 20:57
  • Possible duplicate of [React-router: How to manually invoke Link?](https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link) – p.s.w.g Apr 16 '19 at 20:57
  • you can programmatically navigate with history push, see this for more robust answer(s): https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router – mfakhrusy Apr 16 '19 at 20:59
  • @SLaks I'm kind of new to this, so .... not sure? I have the onClick updating the props, then I figured the link would navigate at the same time... but apparently not? – glitchwizard Apr 16 '19 at 21:07
  • @mfakhrusy I did try adding this to the handleEditCurrentServer ``` this.props.history.push(`/servers/${encodeURIComponent(this.props.IServer.name)}/edit`); ``` But it didn't work either – glitchwizard Apr 16 '19 at 21:10
  • does the URL change but the page isn't navigating, or the button just don't do anything? @glitchwizard – mfakhrusy Apr 16 '19 at 21:11
  • You need to remove the ```Link``` component and use only the ```button``` component @glitchwizard – mfakhrusy Apr 16 '19 at 21:12
  • @mfakhrusy I did remove the `Link` component, and only used the `button`, but when I try to use the history.push I get the following error: `Uncaught TypeError: Cannot read property 'push' of undefined` – glitchwizard Apr 16 '19 at 21:17
  • because you haven't use the ```withRouter``` Higher Order Component (HOC) from react-router-dom package, use them, so ```history``` props will be defined. @glitchwizard. I'm not familiar with typescript's decorator but I think you can use them too. It's the same thing as ```connect``` HOC from `react-redux` if you're familiar with it. – mfakhrusy Apr 16 '19 at 21:18
  • @mfakhrusy that fixed it! I added the withRouter to the export and it worked. Please submit that as an answer so I can mark it appropriately. – glitchwizard Apr 16 '19 at 21:31

0 Answers0