ReactJS使用react-router-dom的Link组件添加跳转链接不显示如何解决

1. 直接错误：Link标签使用不规范 #

你当前代码中的<Link>标签为空，所有可点击文本都放在了</Link>闭合标签之外，相当于页面上渲染的是没有内容的不可见链接，自然无法显示、也无法触发跳转。

2. 可能遗漏的配置项 #

• 项目入口/根组件未用BrowserRouter（或HashRouter）包裹整个应用：react-router-dom的所有组件（Link、路由表等）都必须在Router上下文内才能正常工作，需要确保你的App.jsx或main.jsx里有类似如下配置：

// 示例 main.jsx 配置
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

• 未注册对应路由：你跳转指向的/register路径需要提前在路由表中配置对应的渲染组件，否则跳转后会出现404空白页。

3. 代码修正示例 #

你只需要把需要点击的文本放到Link标签内部即可，对应修改的片段如下：

// 忘记密码链接修改
<div className="forgotPassword">
    <p align="center"><font face="Arial"/><Link to="#">Forgot Password?</Link></p>
</div>
// 注册链接修改
<div className="No_account">
    <p align="center"><font face="Arial"/><Link to="/register">No Account? Register</Link></p>
</div>

额外优化建议 #

• React中已废弃原生class属性，你登录按钮处写的class="BtnLoginClass"需要改为className="BtnLoginClass"，否则绑定的样式不会生效。
• <font>标签属于HTML废弃标签，建议统一用CSS类控制字体样式，更符合React开发规范。
• 登录提交按钮没有嵌套在form标签内，如果你要做表单提交功能，需要在外层补充form标签并绑定提交事件。

内容的提问来源于stack exchange，提问作者Blaq