Кнопка входа не перенаправляет на страницу входа в Firefox - PullRequest
Новая
       8

Кнопка входа не перенаправляет на страницу входа в Firefox

0 голосов
/ 01 февраля 2019

У меня есть кнопка входа на домашней странице.Когда я нажимаю на него, он перенаправляет на страницу входа в Chrome и Edge, но не в Firefox.Я не могу понять, как решить эту проблему.Пожалуйста, помогите мне исправить это. 

export default class Welcome extends React.Component{
    render(){
        let button
        if(this.props.status){
            button = <LogoutButton onClick={this.props.logout} />;
        }else{
            button = <LoginButton />;
        }

        return(
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <Typography variant="h5">
                    Welcome
                </Typography>  
                {button}
            </header>
        )
    }
}


function LoginButton() {
    console.log("test")
    return (
        <Button variant="contained" color="secondary" style={{margin: '2rem'}}>
            <Link to="/login">Log In</Link>
        </Button>
    );
}

function LogoutButton(props) {
    return (
        <Button onClick={props.onClick}>
            Logout
        </Button>
    );
}

И в консоли это показывает следующее предупреждение только в firefox

"Объект Components устарел. Он скоро будет удален"

1 Ответ

0 голосов
/ 02 февраля 2019

Это сбивает с толку поведение из-за различий в браузере, но поведение Firefox вполне разумно.

В конце концов, имея Link внутри Button, вы создаете html, как показано ниже: 

<button><a href="/login">Log In</a></button>

В Firefox, похоже, что button получает событие click и не передает его элементу a.

Один из способов исправить это - это иметьMaterial-UI Button использует Link в качестве внешнего компонента: 

<Button
  component={Link}
  to="/login"
  variant="contained"
  color="secondary"
  style={{ margin: "2rem" }}
>
  Log In
</Button>

Это также устраняет некоторые проблемы со стилем (текст, подчеркнутый / синий) с вашим первоначальным подходом (хотя вы могли переопределить значение по умолчанию a стилей в вашем приложении, чтобы это не было заметно).

Ниже приведен CodeSandbox, демонстрирующий три подхода к кнопке входа в систему:

  • Подход к решению с component={Link} to="/login" в качестве поддержкиButton
  • Простая <button><Link to="/login">Log In</Link></button> версия, показывающая, что это также не работает в Firefox
  • Ваша оригинальная версия

Edit z6672vqm73

...