javascript - 使用 ReactJS 提交后重定向

Question

我有一个简单的表格，只需要一个用户名。我想在他们提交用户名后重定向我的用户，但我真的不明白该怎么做。

这是我的class App，在渲染通道路径正常工作。

   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;

但是，当我尝试向 Submit 事件添加重定向时，我收到了该错误

this.props.router is undefined

标签： javascriptreactjsredirectroutesmern