Реагировать. перенаправление нажатием кнопки в react с помощью react-router-dom

Итак, я пытаюсь понять, как мне сделать правильное перенаправление в моем приложении с помощью щелчков по событиям? Я вставил логику перенаправления react-router-dom в кнопку event handler, но она не работает.

Что я делаю не так?

import React, { Component, Fragment } from 'react';
import Preloader from '../Preloader/Preloader'
import preloaderRunner from '../../Modules/PreloaderRunner'
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    handleClick = () => {
        console.log('Button is cliked!');
        return <Redirect to="/employers" />
    }

    render() {
        return (
            <Fragment>
                <Preloader/>
                <h1>This is the Auth Page!</h1>
                {this.state.navigate === true
                ? <div>
                    <div>You already loggined!</div> 
                    <button onClick={this.handleClick}>Go to the Employers List!</button>
                  </div>
                : <div>
                    <form>
                       // some code...
                    </form>
                </div>}
            </Fragment>
        )
    }
}

export default LoginPage;
0
0
12 943
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вещи, возвращаемые обработчиком кликов, не будут отображаться вашим компонентом. Вы должны ввести новое свойство состояния, которое вы можете установить, а затем отобразить компонент <Redirect>, когда это свойство содержит путь для перенаправления:

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false,
            referrer: null,
        };
    }

    handleClick = () => {
        console.log('Button is cliked!');
        this.setState({referrer: '/employers'});
    }

    render() {
        const {referrer} = this.state;
        if (referrer) return <Redirect to={referrer} />;

        // ...
    }
}

В качестве альтернативы вместо рендеринга вашей собственной кнопки с помощью обработчика кликов вы можете рендерить компонент <Link>, как предлагает @alowsarwar, который будет выполнять перенаправление за вас при нажатии.

Я считаю, что щелкнув мышью, вы переместите пользователя в «/ работодатели». Затем вам нужно использовать Ссылка на сайт из response-router-com. В идеале в React события, такие как 'handleClick', должны изменять состояние, а не возвращать JSX (это неправильный подход)

import React, { Component, Fragment } from 'react';
import Preloader from '../Preloader/Preloader'
import preloaderRunner from '../../Modules/PreloaderRunner'
import { Redirect, Link } from 'react-router-dom';
import axios from 'axios';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    handleClick = () => {
        this.setState({ navigate: true});
    }

    render() {
        return (
            <Fragment>
                <Preloader/>
                <h1>This is the Auth Page!</h1>
                {this.state.navigate === true
                ? <div>
                    <div onClick="this.handleClick">If you want to enable link on some event (Sample test case fyr)</div> 
                    {this.state.navigate ? <Link to='/employers'/> : null}
                  </div>
                : <div>
                    <form>
                       // some code...
                    </form>
                </div>}
            </Fragment>
        )
    }
}

export default LoginPage;

Другие вопросы по теме