@hollanditkzn

Почему выходит ошибка Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. in Route?

У меня следующий код
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Auth from './component/AuthForm';


ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path='/' component={Auth} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('content')
);

Но почему-то я раньше не получал данную проблему, а сейчас у меня ничего не рендерится страница, в чем может быть дело?
в Auth
import React from 'react';
import ReactDOM from 'react-dom';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import Helmet from '../aplication';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

import axios from 'axios';

injectTapEventPlugin();

class UserForm extends React.Component{
    state = {
        login: "",
        password: "",
        error: ""
    };

    handleSubmit = e => {
        e.preventDefault();
        axios.post('/api/user', this.state)
            .then(response => {
                if (response.data === false){
                    this.setState({ error: 'Неверный логин или пароль'});
                } else {
                    console.log(response.data);
                }
            })
            .catch(err => console.log(err));
    };

    handleChange = e => {
        const { name, value } = e.target;

        this.setState({
            [name]: value,
        });
    };

    render(){
        const { login, password, error } = this.state;
        return(
            <div className='authForm'>
                <Helmet title='Авторизация'/>
                <h1>Авторизация</h1>
                <div className='error'>{error}</div>
                <form onSubmit={this.handleSubmit}>
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите логин"
                            name="login"
                            fullWidth={true}
                            value={login}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите пароль"
                            type="password"
                            name="password"
                            fullWidth={true}
                            value={password}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
                    </MuiThemeProvider>
                </form>
            </div>
        );
    }
}

ReactDOM.render(
    <UserForm />,
    document.getElementById('content')
);
  • Вопрос задан
  • 2633 просмотра
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега React
Почему - так написано же. Передаёте в Route не то, что надо, Auth должен быть функцией, а не объектом.

Почему Auth объект - непонятно, про свой код вы явно наврали, экспортируется не какой-то там объект, а... ничего. Вообще никакого экспорта не вижу. А должен быть:

export default class UserForm ...

И вызов ReactDOM.render в Auth не нужен.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы