javascript - React Router 不会根据状态重定向

Question

在代码中，它到达了 isRegistered 函数，我知道这是因为我有它的 console.log 状态。 registered 的状态等于true。因此，根据代码，它应该重定向到/login 但事实并非如此。

import React from 'react'
import "./Register.css";
import {BrowserRouter as Route, Redirect, Link} from 'react-router-dom'
const initialUser = {
  username: "",
  email: "",
  password: "",
  password2: "",
  name: ""
}
class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: initialUser,
      registered: ''
    };
  }

  onUsernameChange = event => {
    this.setState({ username: event.target.value });
  };
  onNameChange = event => {
    this.setState({ name: event.target.value });
  };

  onEmailChange = event => {
    this.setState({ email: event.target.value });
  };

  onPasswordChange = event => {
    this.setState({ password: event.target.value });
  };
  onPassword2Change = event => {
    this.setState({ password2: event.target.value });
  };
  isRegistered() {
    const { registered } = this.state;
    console.log(registered, 'here', this.state)
    if (registered) {
      return (
          <Redirect to='/login' />
      )
    }
  }
  onRegister = () => {
    fetch("http://localhost:3000/register", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: this.state.name,
        email: this.state.email,
        username: this.state.username,
        password: this.state.password,
        password2: this.state.password2
      })
    })
    .then(res => res.json())
    .then(data => {
      console.log(data.isRegistered);
      if (data.isRegistered) {
        this.setState({registered: true})
        this.isRegistered();
      }
    })
  };

  render() {
      return <div className="login-page">
          <div className="form">
            <form className="login-form">
              <input type="text" placeholder="name" onChange={this.onNameChange} />
              <input type="text" placeholder="username" onChange={this.onUsernameChange} />
              <input type="text" placeholder="email" onChange={this.onEmailChange} />
              <input type="password" placeholder="password" onChange={this.onPasswordChange} />
              <input type="password" placeholder="confirm password" onChange={this.onPassword2Change} />
              <button className="bluecolor" onClick={this.onRegister}>
                Register
              </button>
              <p className="message">
                Have an account? <a href="/login">Login</a>
              </p>
            </form>
          </div>
        </div>;
  }
}

export default Register;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

它一直到达 isRegistered() 中的 if 语句。所以我认为是重定向组件出了问题，但我终究无法弄明白。

//更新这就是我现在拥有的

import React from 'react'
import "./Register.css";
import {BrowserRouter as Route, Redirect, withRouter} from 'react-router-dom'
const initialUser = {
  username: "",
  email: "",
  password: "",
  password2: "",
  name: ""
}
class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: initialUser,
      registered: ''
    };
  }

  onUsernameChange = event => {
    this.setState({ username: event.target.value });
  };
  onNameChange = event => {
    this.setState({ name: event.target.value });
  };

  onEmailChange = event => {
    this.setState({ email: event.target.value });
  };

  onPasswordChange = event => {
    this.setState({ password: event.target.value });
  };
  onPassword2Change = event => {
    this.setState({ password2: event.target.value });
  };
  isRegistered() {
    const { registered } = this.state;
    console.log(registered, 'here', this.state)
    if (registered) {
      this.props.history.push('/login')
    }
}
  onRegister = () => {
    fetch("http://localhost:3000/register", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: this.state.name,
        email: this.state.email,
        username: this.state.username,
        password: this.state.password,
        password2: this.state.password2
      })
    })
    .then(res => res.json())
    .then(data => {
      console.log(data.isRegistered);
      if (data.isRegistered) {
        this.setState({registered: true})
        this.isRegistered();
      }
    })
  };

  render() {
      return <div className="login-page">
          <div className="form">
            <form className="login-form">
              <input type="text" placeholder="name" onChange={this.onNameChange} />
              <input type="text" placeholder="username" onChange={this.onUsernameChange} />
              <input type="text" placeholder="email" onChange={this.onEmailChange} />
              <input type="password" placeholder="password" onChange={this.onPasswordChange} />
              <input type="password" placeholder="confirm password" onChange={this.onPassword2Change} />
              <button className="bluecolor" onClick={this.onRegister}>
                Register
              </button>
              <p className="message">
                Have an account? <a href="/login">Login</a>
              </p>
            </form>
          </div>
        </div>;
  }
}

export default withRouter(Register);

这是主要的 App.js

import React, { Component } from 'react';
import RegisterFull from "./Components/Register/RegisterFull";
import LoginFull from "./Components/Login/LoginFull";
import HomeFull from "./Components/Home/HomeFull";
import FullContact from "./Components/Contact/FullContact";
import './App.css';
import './Components/flex.css'
import {BrowserRouter as Router, Route} from "react-router-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false
    }
  }
  loginUser = () => {
    this.setState({signedIn: true})
  }
  render() {
    return (
      <Router>
        <div>
        <Route exact={true} path='/' component={HomeFull}/>
        <Route path='/contact' component={FullContact} />
        <Route path='/login' component={LoginFull} />
        <Route path='/register' component={RegisterFull} />
        <Route path='/about' component={HomeFull} />        
        </div>
      </Router>
      
    )
  }
}

export default App;

Answer 1

您不能像这样通过调用组件生命周期或方法中的另一个方法在渲染中返回 Redirect 元素。

您需要使用提供历史属性的 withRouter HOC 包装您的组件。

import {BrowserRouter as Route,, withRouter, Redirect, Link} from 'react-router-dom'


export default withRouter(Register);

如果您想以编程方式导航:

isRegistered = () => {
const { registered } = this.state;
console.log(registered, 'here', this.state)
if (registered) {
 this.props.history.push('/login)
 }
}