如何使用 react-router Link 访问 React 打字稿中的 props.location？

Posted 2023-02-22

【中文标题】如何使用 react-router Link 访问 React 打字稿中的 props.location？

【英文标题】：How to use react-router Link to access props.location in React typescript?

【发布时间】：2021-06-28 13:24:30

【问题描述】：

我尝试了这里描述的方式React Typescript - How add Types to location.state when passed in a Route，但它对我不起作用。当用户来自 User.js 时，我希望能够访问页码。

用户.js

<Link to= pathname: "/List", state:  page: '4' > Click Here </Link>

List.js

interface Props 
  filter1: string; 
  filter2: string;
  location ?: RouteComponentProps< location: string , ,  state: string >;


export default function List (filter1, filter2, location: Props) 
  console.log(location); //Shows undefined

filter1 和 filter2 将作为来自另一个组件的 props 传递，它们与 User.js 无关

【问题讨论】：

你能解释一下我应该如何定义路线吗？我将使用 useLocation 以防万一这不起作用。

试试你建议的 withRouter HOC。路线已经以第一种方式定义，所以这不是问题

另外，是否可以在本地存储中设置所需的数据并在我从设置页面访问后立即删除？

我只是存储一个简单的数字，所以我相信安全不会有任何问题吗？但是来自 localStorage 的频繁读写肯定会困扰我

酷。所以 localStorage 绝对是处理这个问题的一种方法。但是在兄弟组件之间传递简单数字的首选方式是什么？

【参考方案1】：

如果props 中的location 对您不可用，这意味着您对路由的定义略有不同，即没有将Route Props 传递给您的组件。

要传递这些道具，你可以define your routeslike：

<Route path="/some-path" component=SomeComponent/>

或者

<Route path="/some-path" render=props => <SomeComponent ...props />/>

如果您定义如下路线：

<Route path="/some-path">
  <SomeComponent />
</Route>

路由道具（history、location、match）不会传递给您的组件。但这并不意味着定义 Route 的方式不正确。它实际上是定义路由的首选方式。因为我们可以使用useHistory、useLocationetc. 之类的钩子来获取函数组件中的历史记录和位置。

【讨论】：

而且，还有一个 HOC withRouter，您可以在类组件（以及函数）中使用它，以使您的组件在其 props 中可以使用 Route-Props。