React路由实现登录/注册页面切换及按钮替换问题求助

Hey there! Let's work through your React login/register toggle and routing issues together—since you're new to React, I'll keep this clear and step-by-step.

First, let's fix your routing setup, then we'll handle that button UI change when switching pages.

Step 1: Make sure you have react-router-dom installed #

First thing's first—if you haven't already, install the official routing package for React:

npm install react-router-dom
# or
yarn add react-router-dom

Step 2: Fix your FormHolder routing configuration #

It sounds like your current routes aren't working, so let's set up a proper wrapper using the modern v6+ syntax for react-router-dom:

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

function FormHolder() {
  return (
    <Router>
      <div className="form-container">
        {/* Define all your page routes here */}
        <Routes>
          {/* Default route loads the Login page */}
          <Route path="/" element={<Login />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </div>
    </Router>
  );
}

export default FormHolder;

Step 3: Add navigation between Login and Register #

You have two straightforward options for navigating between pages: static links with <Link> or programmatic navigation with the useNavigate hook.

Option A: Static navigation with <Link> (simplest for buttons)

Update your Login component to include a button that links to the Register page:

// Login.jsx
import { Link } from 'react-router-dom';

function Login() {
  return (
    <div className="login-form">
      <h2>Log In</h2>
      {/* Your login form inputs go here */}
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button type="submit">Log In</button>

      {/* Button to switch to Register */}
      <Link to="/register">
        <button className="auth-toggle-btn">Create an account</button>
      </Link>
    </div>
  );
}

export default Login;

Then update your Register component to link back to Login with a smaller button:

// Register.jsx
import { Link } from 'react-router-dom';

function Register() {
  return (
    <div className="register-form">
      <h2>Register</h2>
      {/* Your register form inputs go here */}
      <input type="text" placeholder="Full Name" />
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button type="submit">Register</button>

      {/* Smaller button to switch back to Login */}
      <Link to="/login">
        <button className="auth-toggle-btn small">Back to Log In</button>
      </Link>
    </div>
  );
}

export default Register;

Option B: Programmatic navigation with useNavigate

If you need to run logic (like form validation or clearing inputs) before navigating, use the useNavigate hook:

// Login.jsx
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleGoToRegister = () => {
    // Add any pre-navigation logic here (e.g., reset form)
    navigate('/register');
  };

  return (
    // ... rest of your login form
    <button onClick={handleGoToRegister} className="auth-toggle-btn">
      Create an account
    </button>
  );
}

Step 4: Style the buttons to toggle size #

Add some CSS to make the Register page's button smaller and styled differently:

/* App.css or your project stylesheet */
.auth-toggle-btn {
  margin-top: 1.5rem;
  padding: 0.8rem 2.2rem;
  border: 1px solid #2563eb;
  background: transparent;
  color: #2563eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.auth-toggle-btn.small {
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
  border: none;
  color: #4f46e5;
}

Bonus: Reuse a toggle button component (cleaner code!) #

To avoid repeating code, create a reusable button component that checks the current route to auto-adjust its text and size:

// AuthToggleButton.jsx
import { Link, useLocation } from 'react-router-dom';

function AuthToggleButton() {
  const location = useLocation();
  const isOnLoginPage = location.pathname === '/' || location.pathname === '/login';

  return (
    <Link to={isOnLoginPage ? '/register' : '/login'}>
      <button className={`auth-toggle-btn ${!isOnLoginPage ? 'small' : ''}`}>
        {isOnLoginPage ? 'Create an account' : 'Back to Log In'}
      </button>
    </Link>
  );
}

export default AuthToggleButton;

Now you can import this component into both Login and Register, and it'll automatically adjust based on which page you're on:

// In Login.jsx and Register.jsx
import AuthToggleButton from './AuthToggleButton';

// ... inside your form
<AuthToggleButton />

That should fix your routing issues and handle the button size change when switching pages! Let me know if you run into any snags with the code.

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