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 ?

Improve this question
3
  • 1
    Possible Duplicate of programmatically-navigate-using-react-router Commented Mar 4, 2018 at 7:58
  • 1
    instead of using link, use dynamic routing when your validateNote is successful which is I suppose what you want. Check the duplicate Commented Mar 4, 2018 at 7:59
  • For the delay part you probably want to use setTimeout in combination with history.push. Commented Mar 4, 2018 at 11:32

1 Answer 1

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

As @MatanBobi said, arrow function in render isn't a good idea. you can check this stackoverflow.com/questions/45053622/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.