React Router v6中通过Link组件传props实现登录/注册切换

这里提供两种实用方案，帮你实现点击不同Link直接切换Authentication组件的显示模式：

方案一：URL搜索参数（推荐，刷新页面状态不丢失） #

这种方式通过URL的查询参数传递模式信息，优点是页面刷新后状态依然保留，用户体验更稳定。

1. 修改导航栏的Link组件 #

给每个Link添加search参数，明确指定模式：

<Link to="/auth?mode=signup" className={classes.btn}>
  Get Started
</Link>
<Link to="/auth?mode=login" className={classes.btn}>
  Login
</Link>

2. 在Authentication组件中读取参数 #

使用React Router提供的useSearchParams钩子获取URL参数，初始化authMode：

import { useSearchParams } from 'react-router-dom';
import { useState } from 'react';

function Authentication() {
  // 获取URL搜索参数
  const [searchParams] = useSearchParams();
  // 从参数中取模式，默认显示login
  const initialMode = searchParams.get('mode') || 'login';
  const [authMode, setAuthMode] = useState(initialMode);

  return (
    <section className={classes.container}>
      <div>
        <img src={auth} alt="认证页面插图" />
      </div>
      <div>
        {authMode === "login" ? (
          <Login setAuthMode={setAuthMode} />
        ) : (
          <Signup setAuthMode={setAuthMode} />
        )}
      </div>
    </section>
  );
}

方案二：Link的state属性（适合临时状态，刷新会丢失） #

如果不需要页面刷新后保留模式，可以用Link的state属性传递数据，这种方式不会暴露在URL中。

1. 修改导航栏的Link组件 #

通过state属性传递模式：

<Link to="/auth" state={{ mode: 'signup' }} className={classes.btn}>
  Get Started
</Link>
<Link to="/auth" state={{ mode: 'login' }} className={classes.btn}>
  Login
</Link>

2. 在Authentication组件中读取state #

使用useLocation钩子获取路由状态：

import { useLocation } from 'react-router-dom';
import { useState } from 'react';

function Authentication() {
  const location = useLocation();
  // 从state中取模式，默认显示login
  const initialMode = location.state?.mode || 'login';
  const [authMode, setAuthMode] = useState(initialMode);

  return (
    <section className={classes.container}>
      <div>
        <img src={auth} alt="认证页面插图" />
      </div>
      <div>
        {authMode === "login" ? (
          <Login setAuthMode={setAuthMode} />
        ) : (
          <Signup setAuthMode={setAuthMode} />
        )}
      </div>
    </section>
  );
}

额外说明 #

你原来的Authentication组件中声明的setMode props没有被使用，可以直接移除，避免代码冗余。

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