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

【问题标题】：Passing a props to Functional Component in route ReactJs在路由 ReactJs 中将道具传递给功能组件
【发布时间】：2020-09-04 08:05:10
【问题描述】：

我的路线如下：

<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。我找到了类组件的一些示例，但没有找到功能组件的示例。

【问题讨论】：

我建议你使用像 redux 或 context api 这样的全局状态。这比使用 react 路由器状态要好得多。
这个组件不应该被渲染，我只需要它重定向并调用一个redux定义的动作。你有什么最好的方法来解决这个问题吗？

标签： reactjs routes react-functional-component

【解决方案1】：

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

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

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

【讨论】：

如果我把代码改成这样就可以了：}exact path="/sign-in" />谢谢你的帮助。
@ManhVu 很高兴听到。如果它有助于解决您的问题，请接受并投票。干杯。