只有一半的反应路由器链接是可点击的答案

【问题标题】：Only half of react router link is clickable只有一半的反应路由器链接是可点击的
【发布时间】：2021-10-19 01:20:39
【问题描述】：

我正在尝试使用 Routes 更改 React 应用程序中的页面。这是我的 App.js：

import './App.css';
import Notifications from "./Components/Notifications";
import Home from "./Components/Home";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
        <Router>
            <header className="appHeader">
                <Link to="/" className="logoLink">
                    <img className="logo"/>
                </Link>

                <div className="headerLinks">

                    <li>
                        <Link className="notificationsLink" to="/notifications"> Notifications </Link>
                    </li>
                    <li>
                        <Link className="updatesLink" to="/updates"> Updates </Link>
                    </li>
                    <li>
                        <Link className="searchLink" to="/search"> Search </Link>
                    </li>

                    <Route path="/" component={Home} />
                    <Route exact path="/notifications" component={Notifications} />
                    <Route path="/updates" component={Notifications} />
                    <Route path="/search" component={Notifications} />

                </div>
            </header>
        </Router>


    </div>
  );
}

export default App;

这是logoLink的css：

.logoLink {
  background-color: pink;
  width: 55px;
  height: 55px;
  left: calc(50% - 27.5px);
  position: relative;
  display: inline-block;
  margin-top: 2.5px;
}

链接大小为 55 x 55 像素，所有链接都应该是可点击的。但只有一半（我假设 27.5px）是可点击的。以下是展示这一点的图片：

Unclickable

Clickable

如您所见，只有链接的左半部分是可点击的。我该如何解决这个问题？

【问题讨论】：

为什么要在css中添加left？
所以它位于屏幕中间
删除左边的属性并设置 display: flex;宽度：100%
或者简单的 text-align: center; if width: 100% 会破坏你的布局
text-align: center 不在屏幕上居中，宽度 100% 意味着整个屏幕都可以点击

标签： css reactjs react-router-dom

【解决方案1】：

首先你应该知道你错了：

<img className="logo"/>

img 标签需要 src 属性。

【讨论】：

它也需要一个类名

【解决方案2】：

好吧，我猜你忘记了Switch，我也为你的代码制作了一个工作代码沙箱，因为我认为你可能没有导出默认组件（如Notificatios,Home,etc），here is the link，这里是 App.js 代码：

import "./App.css";
import Notifications from "./components/Notifications";
import Home from "./components/Home";
import Updates from "./components/Updates";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <header className="appHeader">
          <Link to="/" className="logoLink">
            <img className="logo" src="#" alt="HomeLogo" />
          </Link>

          <div className="headerLinks">
            <li>
              <Link className="notificationsLink" to="/notifications">
                {" "}
                Notifications{" "}
              </Link>
            </li>
            <li>
              <Link className="updatesLink" to="/updates">
                {" "}
                Updates{" "}
              </Link>
            </li>
            <li>
              <Link className="searchLink" to="/search">
                {" "}
                Search{" "}
              </Link>
            </li>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/notifications" component={Notifications} />
              <Route path="/updates" component={Updates} />
              <Route path="/search" component={Notifications} />
            </Switch>
          </div>
        </header>
      </Router>
    </div>
  );
}

export default App;

【讨论】：

他们都是。有导出默认值。而 Switch 没有帮助 :(
@maximum360 你有机会查看我与你分享的链接吗？?
我做到了。我从那里复制并粘贴了代码，但仍然只有一半是可点击的。这很奇怪，因为在您分享的链接中，整个内容都是可点击的

【解决方案3】：

我使用left: 50% 和transform: translateX(-50%) 而不是left: calc(50% - 27.5px); 修复了它。仍然不知道为什么left: calc(50% - 27.5px); 不起作用，但这是一个可靠的解决方法

【讨论】：