0

I have a simple form that only required a username. I want to redirect my user after they submit their username but I don't really understand how to do that.

Here is my class App, in the render the Channels path works correctly.

   import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import Channel from "./channels/Channel.js";
import 'whatwg-fetch';
import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:1270');

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    
    this.setState({ value: event.target.value });  
  }

  handleSubmit(event) {

      const nom = this.state.value;
      alert(nom);
      event.preventDefault();

      this.props.history.push('/channels');

    }

  render() {
    return (
      <Router>
      <div>
        <p>Entrez un nom d'utilisateur :</p>
        <form onSubmit={this.handleSubmit} >
          <input type="text"
              name="name"
              value={this.state.value} 
              onChange={this.handleChange}
          />
          <input type="submit" value="GO" />
        </form>  
        <Link to="/channels">Channels</Link>
      </div>
        <Route path="/channels" component={ Channel }>
          <Channel />
        </Route>
      </Router>
    );
  }
}

export default App;

However when I try to add a redirect to the Submit event I got that error

this.props.router is undefined
Sponge
  • 23
  • 4
  • 2
    this.props.history.push("/channels") – Antax May 12 '20 at 16:00
  • @Antax I got this error `this.props.history is undefined` – Sponge May 12 '20 at 16:05
  • can you paste in more code? only the render and handleSubmit is not enough to help you right now – Antax May 12 '20 at 16:06
  • @Antax added all my code ! – Sponge May 12 '20 at 16:13
  • okay can you make a console.log(this.props) in handleSumbit - function maybe your props are this.props.props – Antax May 12 '20 at 16:14
  • @Antax I get what appears to be an empty Object `Object { }`, if I do `console.log(this.props.pros)` I get `undefined` – Sponge May 12 '20 at 16:17
  • and what does this.props say? – Antax May 12 '20 at 16:20
  • @Antax Only the empty Object and nothing else – Sponge May 12 '20 at 16:22
  • console.log(this.props). Do you see history? – zS1L3NT May 12 '20 at 16:26
  • okay pretty weird... try this: ```
    this.handleSubmit(e, this.props)} > ``` ``` handleSubmit(event, props) { console.log(props) } ```
     – Antax May 12 '20 at 16:26
  • @zS1L3NT I don't see any history in my console.log – Sponge May 12 '20 at 16:29
  • @Antax It changes my url to `http://localhost:3000/?name=k` but doesn't console.log anything – Sponge May 12 '20 at 16:30
  • add event.preventDefault(); so it doesn't redirect, or have you preserved logs? – Antax May 12 '20 at 16:33
  • @Antax With `event.preventDefault()` I also get empty Object, I don't have any logs – Sponge May 12 '20 at 16:38
  • 1
    Its really the same problem listed [here](https://stackoverflow.com/questions/58220995/cannot-read-property-history-of-undefined-usehistory-hook-of-react-router-5/58221867#58221867). The `Router` sets the history value, so you can only use it in a sub component, You'll have to put the `Router` at a higher level to get it to work. – Brian Thompson May 12 '20 at 16:41
  • 1
    `props` don't magically appear. You either pass them to a component yourself, or a third party component does it for you. `Router` adds some props to each of it's child components (history, location, etc). But the parent component does not have access to these – Brian Thompson May 12 '20 at 16:45
  • @BrianThompson If I understand correctly I should put my form in a Sub component ? – Sponge May 12 '20 at 16:51
  • If your form and submit function were in a sub component, I believe they should have access to the `history` prop. – Brian Thompson May 12 '20 at 16:53

0 Answers0