英文:
All my links in my react js projects have become unclickable
问题
I am using react v17 and react-router-dom v6 in my project, and my Route component uses element instead of component. My problem begins when I try to get and show data from the server, and I use the useEffect hook.
<Routes>
<Route exact path="/" element={<HomeFour />} />
<Route path="/articles/:page" element={<Article />} exact />
<Routes>
Example of a link:
<a
className="nav-link active"
id="pills-home-tab"
data-bs-toggle="pill"
href="#pills-home"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
Most Popular
</a>
I would like to make my links clickable.
英文:
I am using react v17 and react-router-dom v6 in my project and my Route component use element instead of component. My problem begin when I try to get and show data belong the server and I use useffect hook.
<Routes>
<Route exact path="/" element={<HomeFour />} />
<Route path="/articles/:page" element={<Article />} exact />
<Routes>
Example of link
<a
className="nav-link active"
id="pills-home-tab"
data-bs-toggle="pill"
href="#pills-home"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
Most Popular
</a>
I would like to see my links clickable.
答案1
得分: -1
以下是已翻译的内容：
似乎问题可能与您锚点（<a>）标签中的 href 属性相关。在 React Router v6 中，href 属性不用于应用程序内导航。相反，您应该使用由 react-router-dom 的 Link 组件提供的 to 属性。
为了解决问题，您可以将锚点标签替换为 Link 组件。这是一个示例：
import { Link } from 'react-router-dom';
// ...
<Link
className="nav-link active"
id="pills-home-tab"
to="#pills-home"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
最受欢迎
</Link>
确保从 react-router-dom 中导入 Link 组件，然后用 Link 组件替换您的锚点标签（<a>）。通过这样做，您的链接应该可以点击，并正确处理 React 应用程序内的导航。
另外，如果您为 "/#pills-home" 定义了特定的路由，请确保在 Routes 组件中包括它，以确保在单击链接时呈现相应的组件。
英文:
It seems like the issue might be related to the href attribute in your anchor (<a>) tags. In React Router v6, the href attribute is not used for navigation within the application. Instead, you should use the to attribute provided by the Link component from react-router-dom.
To fix the issue, you can replace your anchor tags with the Link component. Here's an example:
import { Link } from 'react-router-dom';
// ...
<Link
className="nav-link active"
id="pills-home-tab"
to="#pills-home"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
Most Popular
</Link>
Make sure you have the Link component imported from react-router-dom, and then replace your anchor tags (<a>) with the Link component. By doing this, your links should be clickable and properly handle navigation within your React application.
Additionally, if you have a specific route defined for "/#pills-home", make sure to include it in your Routes component to ensure that the corresponding component is rendered when the link is clicked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论