Блог

Главная - Вопросы по программированию - Как получить правильное значение из props.match.params в дочернем компоненте?

Как получить правильное значение из props.match.params в дочернем компоненте?

#reactjs #redux #react-router #token

#reactjs #сокращение #реагировать-маршрутизатор #токен

Вопрос:

В моем приложении ReactJS мне нужно проверить токен, полученный по электронной почте. В маршруте я определяю путь с помощью параметра :token и принимаю его в реквизитах дочернего компонента.

 class App extends Component {
    //...
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <Fragment>
                        //...
                        <main>
                            <div className="container">
                                <Switch>
                                    //...
                                    <Route path='/email-verify/:token' component={EmailVerify} />
                                </Switch>
                            </div>
                        </main>
                    </Fragment>
                </Router>
            </Provider >
        )
    }
}

И после того, как в дочернем компоненте я передаю параметр в функции action creator. Но функция useEffect выводит на консоль token=xxx вместо простого значения xxx :

 export function EmailVerify(props) {
      useEffect(() => {
            //emailVerify({ 'token': props.match.params.token });
            console.log(token) // 'token=xxx'
      }, [])
      return <div>{props.match.params.token}</div>
}
export default connect(null, { emailVerify })(EmailVerify);

В чем может быть проблема?

Комментарии:

1. откуда match берется? Используете ли вы react-router ? Маршрутизация должна исходить из withRouter() , а не из (Redux?) connect() . Также обратите внимание, что при использовании функциональных компонентов они вам больше не понадобятся. HOC.

2. Посмотрим, поможет ли это reactrouter.com/web/api/location

3. Да, я использую react-router. В моем подключении я определил функцию в [mapDispatchToProps], но в контексте этого вопроса это не имеет значения.

4. если вы используете connect() только для mapDispatchToProps() (примечание: не уверен, какую версию Redux вы используете, но у вас также есть хорошие хуки с Redux), то откуда match.paras.token берется? Ему не присвоено значение из Redux, вы не указываете значение с помощью withRouter() и … это свойство, переданное из контейнера?