如何将React组件中useParams获取的token导出到其他文件？

在React的ForgotPassword组件中通过useParams()获取到了token，需要将该token导出到其他文件中使用。组件原代码如下：

const ForgotPassword = ({ ...others }) => {
  const theme = useTheme();
  const { token } = useParams()

  const handleSubmit = async(values) => {
    console.log('load')
    try {
      const response = await axios.post(`http://localhost:3001/auth/reset/${token}`, {
        password: values.password
      });
      if (response.data.msg === 'Password reset token is invalid or has expired') {
        console.log(response)
      } else {
        // success message
      }
    } catch (err) {
      console.error(err);
      console.log("Something went wrong. Please try again later.")
    }
    console.log('not load')
  };


  return (
    //...Content...
  );
};

export default ForgotPassword;

尝试了以下写法但无法实现需求：

export const token = useParams().token;

export const Token  = token 

• useParams()是React路由的Hook，只能在React函数组件或者自定义Hook内部调用，直接在组件外部调用会违反Hook规则，导致报错。
• 组件内部的token属于组件渲染时的内部状态值，作用域仅限组件内部，无法直接通过export暴露到外部——因为组件每次渲染token可能变化，外部无法实时获取最新值。

根据你使用token的场景，可选以下几种方案：

1. 直接在目标组件调用useParams() #

如果需要使用token的组件也是路由组件（或在路由组件的子组件树中），直接在目标组件里调用useParams()获取即可：

// 其他需要token的组件
import { useParams } from 'react-router-dom';

const OtherComponent = () => {
  const { token } = useParams();
  // 在这里使用token
  return <div>{token}</div>;
};

2. 通过props传递token #

如果目标组件是ForgotPassword的子组件，直接把token作为props传递：

// 在ForgotPassword组件的return中
return (
  <div>
    {/* 传递token给子组件 */}
    <ChildComponent resetToken={token} />
  </div>
);

// 子组件中使用
const ChildComponent = ({ resetToken }) => {
  // 使用resetToken
  return <div>{resetToken}</div>;
};

3. 使用React Context共享token #

如果需要在多个不相关的组件中使用token，可创建Context共享该值：

// 创建TokenContext.js
import { createContext, useContext } from 'react';

const TokenContext = createContext(null);

export const TokenProvider = ({ children, token }) => {
  return (
    <TokenContext.Provider value={token}>
      {children}
    </TokenContext.Provider>
  );
};

export const useToken = () => {
  const token = useContext(TokenContext);
  if (!token) {
    throw new Error('useToken must be used within a TokenProvider');
  }
  return token;
};

在ForgotPassword中包裹需要使用token的组件：

// ForgotPassword组件中
import { TokenProvider } from './TokenContext';

const ForgotPassword = ({ ...others }) => {
  const theme = useTheme();
  const { token } = useParams();

  // ...handleSubmit逻辑

  return (
    <TokenProvider token={token}>
      {/* 这里的子组件都可通过useToken获取token */}
      <OtherComponent />
      <AnotherComponent />
    </TokenProvider>
  );
};

在其他组件中调用：

import { useToken } from './TokenContext';

const OtherComponent = () => {
  const token = useToken();
  // 使用token
  return <div>{token}</div>;
};

4. 存入全局状态管理库（如Redux/Zustand） #

如果项目使用状态管理库，可将token存入全局状态，供其他组件获取：
以Zustand为例：

// store.js
import { create } from 'zustand';

export const useStore = create((set) => ({
  resetToken: null,
  setResetToken: (token) => set({ resetToken: token }),
}));

在ForgotPassword中设置token：

import { useStore } from './store';
import { useEffect } from 'react';

const ForgotPassword = ({ ...others }) => {
  const theme = useTheme();
  const { token } = useParams();
  const setResetToken = useStore((state) => state.setResetToken);

  // 组件挂载时同步token到全局状态
  useEffect(() => {
    if (token) {
      setResetToken(token);
    }
  }, [token, setResetToken]);

  // ...其他逻辑
};

在其他组件中获取：

import { useStore } from './store';

const OtherComponent = () => {
  const resetToken = useStore((state) => state.resetToken);
  // 使用resetToken
  return <div>{resetToken}</div>;
};

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