React <Link> does nothing when clicking on it inside a map-CodePudding

in the Code below I am trying to use Link. The problem is, the first Link element does work, while the second Link element inside the map does not work. It does nothing when clicking on it. I searched a lot on different websites but could not find a reason why that is the case. Can anyone explain to me why this is the case and if there is a solution to my problem?

return (
    <div>
        <p><Link to='/test'>Testlink</Link></p>
        <div className={style.searchBarContainer}>
            <input className={style.searchBar} type="text" placeholder={placeholder} 
             onChange={handleChange} onFocus={handleFocusIn}
             onBlur={handleFocusOut}/>
            <div className={style.searchIcon}><i className="search icon"></i></div>
        </div>
        <div className={style.dataWindow}>
            {searchInput.map((value, key) =>{
                return(
                    <div className={style.dataItem} key={value.id}>
                        <p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
                    </div>
                );
            })}
        </div>
    </div>
)

Thanks in advance

Alexej

CodePudding user response：

You should use Link element on top lavel at least to provide a much wider hit area to click:

return (
    <div>
        <p><Link to='/test'>Testlink</Link></p>
        <div className={style.searchBarContainer}>
            <input className={style.searchBar} type="text" placeholder={placeholder} 
             onChange={handleChange} onFocus={handleFocusIn}
             onBlur={handleFocusOut}/>
            <div className={style.searchIcon}><i className="search icon"></i></div>
        </div>
        <div className={style.dataWindow}>
            {searchInput.map((value, key) =>{
                return(
                    <Link to='/test' key={value.id}>
                        <div className={style.dataItem}>
                            <p>{value.last_name}, {value.first_name}</p>
                        </div>
                    </Link>
                );
            })}
        </div>
    </div>
)

CodePudding user response：

Your code is working here in my CodeSandbox. The problem must be somewhere else.