在路线ReactJs中将props传递给功能组件

问题描述

我的路线如下：

<Switch>
  <Redirect
    path="/google/auth/success"
    to={{pathname: "/sign-in",state: {propsTest: "Sample property send"}}}
  />
  <Route
    component={SignIn}
    exact
    path="/sign-in"
  />
  ...
</Switch>

SignIn组件是一个功能组件，如下所示：

const SignIn = ({ isLoggedIn,authorization,signin,error }) => {
...
return (
...
)
}

我想将propsTest传递给此SignIn组件，我尝试这样做：

const SignIn = ({ isLoggedIn,error,propsTest }) => {

...
console.log("Property passed to SignIn",propsTest);
...
return (
...
)
}

如何在SignIn组件中获取propsTest。我找到了一些有关“类组件”而不是“功能组件”的示例。

解决方法

我相信无论该组件是基于类还是功能的组件，它们都使用相同的API /接口（即props）运行，都是一样的。

您可以创建一个匿名组件，该组件将路线道具代理到渲染的组件，然后还传递您喜欢的任何其他道具。

<Route
  component={routeProps => <SignIn {...routeProps} routeProps.propsTest />}
  exact
  path="/sign-in"
/>