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

Question

我有一个react应用程序，它的路由配置如下

/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，所以我建议你使用它给你的东西，不要不必要地使你的代码复杂化。根据你的描述，这是我认为你需要做的。

你需要检查你从/packages/:packageId/years/:yearsId组件中的react router获得的状态，看看它是否存在，如果它不存在，就调用你的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
}
}, [])

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