来自“react-router-dom”的链接在 <div> 中不起作用答案

【问题标题】：Link from 'react-router-dom' does not work inside <div>来自“react-router-dom”的链接在 <div> 中不起作用
【发布时间】：2021-11-06 15:30:38
【问题描述】：

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

当我用<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>

【问题讨论】：

开头的Switch标签在哪里？
@PaulFitzgerald 感谢您的关注。但即使在正确的条件下它也不起作用
它是否适用于第二个代码 sn-p 中的第二个 <Link /> 标记
@Dilshan 不是。
更多有用的信息：第二个示例中页面上的锚标记是什么？ href 的价值是多少？当你点击它时，浏览器地址栏中的路由是什么？

标签： javascript reactjs react-router

【解决方案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;，现在它可以工作了。

【讨论】：