Передача реквизита функциональному компоненту в route ReactJS

#reactjs #routes #react-functional-component

#reactjs #маршруты #реагирующий функциональный компонент

Вопрос:

У меня есть маршрут, как показано ниже:

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

Компонент входа является функциональным компонентом, как показано ниже:

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

Я хочу передать propsTest этому компоненту входа, я пытался как:

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

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

Как я могу получить propsTest в компоненте входа. Я нашел несколько примеров для компонента класса, но не для функционального компонента.

1. Я рекомендую вам использовать глобальное состояние, такое как redux или context api. Это намного лучше, чем использовать состояние маршрутизатора react.

2. Этот компонент не должен быть отображен, мне просто нужно, чтобы он перенаправлял и вызывал определенное действие redux. Вы порекомендуете мне какой-нибудь лучший способ справиться с этим?

Ответ №1:

Я считаю, что это было бы одинаково, независимо от того, является ли компонент классовым или функциональным компонентом, они работают с одним и тем же API / интерфейсом, т. Е. Реквизитом.

Вы можете создать анонимный компонент, который передает реквизит маршрута отображаемому компоненту, а затем также передавать любые дополнительные реквизиты, которые вам нравятся.

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

1. Это сработало, если я изменил код на этот: <Route component={routeProps => <SignIn {…routeProps} routeProps.propsTest />} точный путь = «/ вход» /> Спасибо за вашу помощь.

2. У меня это сработало, Братан, спасибо: <Route path=»/reports» component={(props) => <Reports MenuOpend={«true»}/>} />