0

I am using React and Redux. At some point, I have a Link, and I would like to add a delay to this Link before changing the route.

   render(){
        return(
            <div>
            <h3>New note for {this.props.match.params.user}</h3>
            <input  placeholder="Your note" onChange = {(e)=>this.handleChange(e)}/>
            <Link to={`/board/${this.props.match.params.user}`} >
            <br/>
                <button onClick={(e) => {this.validateNote()}}>Add this now !</button>
            </Link>
            </div>
        );
    }

How can I do that ?

Rémy Kaloustian
  • 597
  • 6
  • 10
  • 22
  • 1
    Possible Duplicate of [programmatically-navigate-using-react-router](https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108) – Shubham Khatri Mar 04 '18 at 07:58
  • 1
    instead of using link, use dynamic routing when your validateNote is successful which is I suppose what you want. Check the duplicate – Shubham Khatri Mar 04 '18 at 07:59
  • For the delay part you probably want to use `setTimeout` in combination with `history.push`. – timotgl Mar 04 '18 at 11:32

1 Answers1

1

As @shubham-khatri wrote in the comments, I would definitely use a programmatic way to navigate instead of a Link component. Have a look here.

To answer the specific problem, as you already have a button inside the link, i would use it's callback to change the routing.

<button onClick={(e) => {this.validateNote(); this.props.history.push(`/board/${this.props.match.params.user}`);}}>Add this now !</button>

If we're already talking, I wouldn't recommend you the use an anonymous function as a callback to the onClick because that way you create a new function each render. Try to read about it here

Matan Bobi
  • 2,693
  • 1
  • 15
  • 27
  • 1
    As @MatanBobi said, arrow function in render isn't a good idea. you can check this https://stackoverflow.com/questions/45053622/how-to-avoid-binding-in-render-method/45053753#45053753 – Shubham Khatri Mar 04 '18 at 09:58