在路由 ReactJs 中将道具传递给功能组件

Question

我有如下路线：

<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, authorization, signin, error, propsTest }) => {

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

如何在 SignIn 组件中获取 propsTest。我找到了一些 Class 组件的示例，但没有找到功能组件。

Answer 1

我相信无论组件是 class-based 还是功能组件，它们都是一样的，它们使用相同的 API/interface，即 props。

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

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

在路由 ReactJs 中将道具传递给功能组件

Passing a props to Functional Component in route ReactJs

routes

reactjs

react-functional-component