Discussion :

[totot]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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`.

[gwyohm]

Je pense que ton passage de paramètres n'est pas bon. Essaye ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

export default withRouter(withStyles(loginPageStyle)(LoginPage))