React - utiliser withStyles et withRouter

Bonjour,

J'utilise un template de material UI et j'ai mi en place une page de login. Je souhaite lorsque l'utilisateur se connecte, le rediriger ensuite vers la page d'accueil (/home):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
 
import loginPageStyle from "assets/jss/material-kit-react/views/loginPage.jsx";
 
import axios from 'axios';
 
import LoginTemplate from "templates/authentification/LoginTemplate.jsx";
 
import { withRouter } from 'react-router-dom'
 
import compose from 'recompose/compose';
import { connect } from 'react-redux';
 
class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    // we use this to make the card to appear after the page has been rendered
    this.state = {
      cardAnimaton: "cardHidden",
      authentification:{
        email : "",
        password: ""
      }
    };
 
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    // we add a hidden class to the card and after 700 ms we delete it and the transition appears
    setTimeout(
      function() {
        this.setState({ cardAnimaton: "" });
      }.bind(this),
      700
    );
  }
 
  handleChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;
 
    let authentification = {...this.state.authentification};
    authentification[name] = value;
    this.setState({authentification});
  }
 
    handleSubmit(event) {
    event.preventDefault();
    const authentification = this.state.authentification;
    console.log(authentification);
 
    const params = new URLSearchParams();
    params.append('username', authentification.email);
    params.append('password', authentification.password);
 
    axios.post('/login', params)
    .then(response => {
      console.log(response);
      this.props.history.push('/home');
    });
  }
 
  render() {
    return LoginTemplate.call(this)
  }
}
export default withRouter(withStyles(loginPageStyle),LoginPage)(LoginPage);

Mais j'ai l'erreur suivante quand j’ouvre mon application :

Citation:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Route`.