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

Question

Please do not mark duplicate. I read through many answers but none of them solved the problem!

When I wrap my component with <Link></Link> everything works fine. But when I wrap the component with a <div></div> and take the <Link> into the component <Link> stops working.

<Link> Works:

//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> Doesn't work:

      <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 (just in case)

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>
  );
}

Browser inspect shows <a> tags.

<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

Solved!

It was a css styling issue. I had a css that uses position: absolute; :

.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);
}

For some reason it was causing the issue. Then I changed it to position: static; and now it works.