无法关联React.js的Login与Signup组件问题求助

你遇到的核心问题是没正确搭建react-router-dom的路由体系，光导入Link组件没用，必须先完成路由配置，同时替换掉组件里的普通a标签，才能实现无刷新的组件切换。以下是具体解决步骤：

1. 确认安装react-router-dom #

如果还没安装，先执行安装命令：

npm install react-router-dom
# 或使用yarn
yarn add react-router-dom

2. 在根组件（如App.js）配置路由框架 #

需要用BrowserRouter包裹整个应用，再通过Routes和Route定义路径与组件的映射关系：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Signup from './Signup';

function App() {
  return (
    <Router>
      <Routes>
        {/* 默认访问根路径时显示Login组件 */}
        <Route path="/" element={<Login />} />
        {/* 访问/signup路径时显示Signup组件 */}
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 修改Login组件的链接 #

去掉多余的Router导入，把普通a标签替换成Link组件：

import React from 'react'
import { Link } from 'react-router-dom' // 仅保留Link导入
export default function Login() {
  return (
    <div className="main">
      <div className="sub-main">
        <div>
          <h1>Login</h1>
          <div>
            <input type="text" placeholder="Username" className="name"/>
          </div>
          <div>
            <input type="password" placeholder="Password" className="pass"/>
          </div>
          <div>
            <button className="button">Login</button>
          </div>
          <div className="link">
            {/* 用Link替换a标签，to属性对应路由路径 */}
            <p>新用户？<Link to="/signup">点击注册</Link></p>
          </div>
        </div>
      </div>
    </div>
  )
}

4. 修改Signup组件的链接 #

同样把a标签替换成Link组件：

// 保留原有状态和验证逻辑，仅修改链接部分
<div className="link">
  <p>已有账号？<Link to="/">返回登录</Link></p>
</div>

问题根源说明 #

• 缺少BrowserRouter包裹：react-router-dom需要路由上下文，所有路由相关组件必须在Router内部才能生效。
• 未配置Routes和Route：没有定义路径与组件的映射，Link跳转后无法找到对应组件渲染。
• 使用普通a标签：a标签会触发页面刷新，违背React单页面应用的跳转逻辑，必须用Link组件实现无刷新切换。

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