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

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

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

User.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 无关

解决方法

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

要传递这些道具，您可以define your routes：

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

或

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

如果您定义路由，例如：

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

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