Question

我正在构建Signup组件，如果用户传递了所有信息，该组件应重定向到根路径。

但是，由于未更改url，重定向组件由于某些原因无法正常工作。在line 12上，我正在登录in renderRedirect，并且可以在控制台中看到此消息，因此我处于renderRedirect方法内，但是就像我说的那样，url保持不变，localhost:3000/signup m更改为localhost:3000/。

知道为什么吗？

import React from "react";
import { Redirect } from "react-router-dom";

class Signup extends React.Component {
  state = {
    password: "",
    fullName: "",
    email: ""
  };

  renderRedirect = () => {
    console.log("in renderRedirect");
    return <Redirect push to="/" />;
  };

  handleInputChange = e => {
    const value = e.target.value;
    const name = e.target.name;
    this.setState({ [name]: value });
  };
  handleSignup = () => {
    this.props.onSignup(
      {
        username: this.state.username,
        password: this.state.password,
        fullName: this.state.fullName,
        email: this.state.email
      },
      () => this.renderRedirect()
    );
  };
  render() {
    return (
      <div className="login-wrap">
        <h2>Sign Up</h2>

        <div className="form">
          <input
            type="text"
            placeholder="Full Name"
            name="fullName"
            value={this.state.fullName}
            onChange={this.handleInputChange}
          />
          <input
            type="email"
            placeholder="Email address"
            name="email"
            value={this.state.email}
            onChange={this.handleInputChange}
          />
          <input
            type="password"
            placeholder="Password"
            name="password"
            value={this.state.password}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleSignup}>Sign up</button>
        </div>
      </div>
    );
  }
}

export default Signup;

Answer 1

我会忽略重定向组件中的“推送”，看看是否可行。否则，您可以使用历史记录对象，而改用this.props.history.push（'/'）。如果您无权访问routeProps，则可以使用'react-router-dom'中的{withRouter}包装您的注册组件

重定向组件不会更改网址（响应）

1 个答案: