CODEWITHSUNDEEP
javascriptreactjsreact-routerjsx
user14197708
user14197708

Reputation:

React Router Linking using <button>

I am using React Router. I want when the user clicks on the button, it directs them to the page (endpoint) /form which has the UserForm component.

Here is my code wrapping the button:

          <Router>
          <Link to="/form" className="updateLink">
              <button className="updateBtn" onClick={() => {
                  this.update(id);
                  console.log(`Item Number: ${id} Was Updated Successfully`);
                        window.alert(`Item Number: ${id} Was Updated Successfully`);
                    }}>U</button>
          </Link>
          <Switch>
             <Router exact path="/form" component={UserForm} />
          </Switch>
          </Router>

Upvotes: 1

Views: 208

Answers (2)

Dan Wilstrop
Dan Wilstrop

Reputation: 445

Is the above code accurate as in your code?

Router statement should be set up as below, usually in App.js

    <Router>
        <Switch>
        <Route path = './form' component = {form}
        </Switch>
    </Router>

You then create the form component and to link to it you then import the link component in the component you wish to use it.

Then use as below

    <Link to = './form'> Some Text </Link>

Onto the button issue you are having

It will render but you shouldn't nest an <a> or <button> tag in HTML as it wont be sematic for screenreaders, isn't accessible, nor it it valid HTML.

The Link element in react creates and renders an <a> tag which shouldn't be nested in a button.

You could use useHistory in your case for the same effect

    import React from 'react'
    import { useHistory } from 'react-router-dom'
    
    const component = () => {
      const { push } = useHistory()
      
    ...
    
    
      <button
        type="button"
        onClick={() => push('/form')}>
        Click me to go to a form!
      </button>
      ...
    }

Upvotes: 0

Luis Osta
Luis Osta

Reputation: 144

So the reason that doesn't work is because the Button has its own click handler separate from the link handler. You have two options available to you:

  • Style the Link tag such that it looks like a button but don't actually look like a button (this won't work if you need to do additional logic in addition to routing)

  • Actually use a button. And then use the 'useHistory' React Hook React Router provides to get the functionality you're looking for.

The component would look something like this:

const history = useHistory()
return (
     <Button onClick={() => history.push("/abc")}/>

)

I would personally recommend that you simply style the link tag in the way that you need it to. As that would be more accessible and understandable to the user. But that's only a good idea if you only care about the routing.

Upvotes: 1

Related Questions