Question

我有一个反应应用程序，它配置了这样的路由

/packages/:packageId/years/:yearsId 其中 /packages 返回一个组件，该组件具有指向 /packages/:packageId 的链接，该链接继续向下渲染到 /packages/:packageId/years/:yearsId 的最终路径。

现在的问题是，我想从从 /packages/:packageId 开始的 API 获取数据并将其传递给从 /packages/:packageId 呈现的组件。

我想知道这样做的最佳策略是什么。目前，我通过链接组件传递状态以将组件之间的链接作为

import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "react-router-dom";

interface IProps {
    path: string;
    state?: object
}

/**
 * A right facing angle that acts as a <Link /> component in the cell of tables. 
 * @param {IProps}
 */
const ArrowLink = ({ path, state }: IProps) => {
    return (
        <Link 
            to={{
                pathname: path,
                state: state
            }}>
                <FontAwesomeIcon
                    icon={faAngleRight}
                    size="lg"
                    aria-label="open menu icon"
                />
        </Link>
    );
};

export default ArrowLink;

但我想知道是否有更好的做事方式。我应该使用 Context 并从顶层传递信息吗？我想沿着这条路走下去，但我不确定如果有人立即转到 /packages/:packageId/years/:yearsId 该怎么办（因为这样数据就不会从顶级 API 调用加载）。如果 Context 是 Context 或其他东西，我是否只需要在 null 中创建一个函数才能获得一个获取数据的函数？

Answer 1

react-router-dom 在内部使用 context 所以我建议你使用它给你的东西，不要不必要地使你的代码复杂化。根据您的描述，我认为您需要执行以下操作。

您需要检查您从 react router 组件中的 /packages/:packageId/years/:yearsId 获得的状态，并查看它是否存在，如果它不存在，只需调用您的 api（这是为了直接访问该组件的用户）。

对于那些从 /packages/:packageId 组件转到 /packages/:packageId/years/:yearsId 组件的用户，您已经进行了 api 调用，并且只需通过 react router 状态传递结果。

您的 /packages/:packageId/years/:yearsId 组件应如下所示：


const location = useLocation();
useEffect(() => {
  if(location.state){
    //use the state 
  }else {
    //make an api call
  }
}, [])

如果你展示了这些组件的实际代码，我可以更具体

如何将数据从顶级路由传递到 React 中的内部路由？

1 个答案: