0

I am novice on react and I try to create a new website using react. and I have a problem with making button to switch to an other page. this is my code 

import React from 'react';

export default class Connexion extends React.Component {

goToApp = event => {
    event.preventDefault();
    // On récupère le pseudo
    const pseudo = this.boxInput.value;
    // On change d'url
    this.context.router.transitionTo(`/box/${pseudo}`);
};

render() {
    return (
        <div className="connexionBox">
            <form className="connexion" onSubmit={(e) => this.goToApp(e)}>
                <h1>Connexion</h1>
                <input type="text" placeholder="Nom" pattern="[A-Za-z-]{1,}" required ref={(input) => {
                    this.boxInput = input
                }}/>
                <button type="submit">GO</button>
                <p>Pas de caractères spéciaux.</p>
            </form>
        </div>
    )
}
static contextTypes = {
    router: React.PropTypes.object
};}

and the erreur message is _this.context.router.transitionTo is not a function

thanks for your time

victor

PS: I do not use redux or anything like it.

victorfau
  • 45
  • 1
  • 4
  • 18
  • are you using `react-router`? if so, what version? – Robert Farley Nov 30 '17 at 14:09
  • on my index.js i use react-router-dom. but I add react-router 4.0.0-alpha.3 – victorfau Nov 30 '17 at 14:11
  • this is not a duplicate of [Unable to access React instance (this) inside event handler](https://stackoverflow.com/q/29577977/8480088) because the arrow function notation is being used in class definition, which appropriately binds `this`. – Robert Farley Nov 30 '17 at 14:30

0 Answers0