来自'react-router-dom'的链接在内部<div>不起作用

Question

请不要标记重复。我通读了许多答案，但没有一个能解决问题！

当我用<Link></Link>包装我的组件时，一切都很好。但当我用<div></div>包装组件并将<Link>放入组件时，<Link>停止工作。

<Link>作品：

//here <Link to='candidate-info' className={styles["candidate-info"]}>
<div className={`${styles["container"]} ${i === 1 ? styles["selected"] : ''}`}>
<div className="card" style={{ width: '18rem', minHeight: '21.875rem' }}>
<div className={styles["image-container"]}>
<img src="/uploads/profile.jpeg" className="card-img-top fluid" alt="..." />
</div>
<div className="card-body">
<h5 className="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className="card-text">{candidate.motto}</p>
</div>
<div className={`card-body ${styles["button-container"]}`}>
<button className="btn btn-sm btn-primary">Vote</button>
<button className="btn btn-sm btn-info">More info</button>
</div>
</div>

<div className={styles["overlay"]}>
<div className={styles["icon"]} title="User Profile">
<i className="fa fa-check"></i>
</div>
</div>
</div>
</Link>

<Link>不工作：

<div to='candidate-info' className={styles["candidate-info"]}>
<div className={`${styles["container"]} ${i === 1 ? styles["selected"] : ''}`}>
<div className="card" style={{ width: '18rem', minHeight: '21.875rem' }}>
//here <Link className={styles["image-container"]}>
<img src="/uploads/profile.jpeg" className="card-img-top fluid" alt="..." />
</Link>
<div className="card-body">
<h5 className="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className="card-text">{candidate.motto}</p>
</div>
<div className={`card-body ${styles["button-container"]}`}>
<button className="btn btn-sm btn-primary">Vote</button>
//here  <Link to='candidate-info'>
<button className="btn btn-sm btn-info">More info</button>
</Link>
</div>
</div>

<div className={styles["overlay"]}>
<div className={styles["icon"]} title="User Profile">
<i className="fa fa-check"></i>
</div>
</div>
</div>
</div>

App.js(以防万一(

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Container } from 'react-bootstrap'
function App() {
return (
<Router>
<main className='py-3'>
<Container>
<Route path='/login' component={LoginPage} />
<Route path='/voting-summary' component={VotingSummary} />
<Route path='/candidate-info' component={CandidateInfoPage} exact />
<Route path='/register-candidate' component={registerCandidates} />
<Route path='/register-voter' component={registerVoter} />
<Route path='/' component={MainPage} exact />
</Container>
</main>
</Router>
);
}

浏览器检查显示<a>标记。

<div class="style_candidate-info__gbgqb">
<div class="style_container__29PKk ">
<div class="card" style="width: 18rem; min-height: 21.875rem;">
<a href="/candidate-info">
<img src="/uploads/profile.jpeg" class="card-img-top fluid" alt="...">
</a>
<div class="card-body">
<h5 class="card-title">As professional Bile</h5>
<p class="card-text">To make brightest future for our country</p>
</div>
<div class="card-body style_button-container__2mqXL">
<button class="btn btn-sm btn-primary">Vote</button>
<a href="/candidate-info">
<button class="btn btn-sm btn-info">More info</button>
</a>
</div>
</div>
<div class="style_overlay__12tWI">
<div class="style_icon__peFOR" title="User Profile">
<i class="fa fa-check"></i>
</div>
</div>
</div>
</div>

Answer 1

已解决！

这是一个css样式问题。我有一个使用position: absolute;:的css

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: rgb(115, 255, 0);
}

出于某种原因，它引起了这个问题。然后我把它改为position: static;，现在它工作了。