來自“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 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);
}

出於某種原因，它導致了這個問題。 然后我把它改成position: static; 現在它起作用了。