ReactJS登录表单中注册按钮添加与页面跳转问题求助

Hey Sarah, 我看了你的代码，问题主要出在路由组件导入错误和多余的表单结构上，这两个问题导致注册按钮没法正常跳转，反而触发了登录的逻辑。下面是具体的修复方案：

1. 修正react-router-dom的导入 #

你之前把BrowserRouter错误地重命名成了Link，这完全搞错了组件的用途——BrowserRouter是用来包裹整个应用的路由容器，而Link才是实现页面跳转的组件。把导入语句改成：

import { Link, withRouter } from 'react-router-dom';

2. 移除多余的<form>标签，修正按钮类型 #

注册按钮不需要放在<form>里，而且按钮默认是submit类型，点击时会触发表单的默认提交行为，这就是为什么它会和登录按钮的动作冲突。直接用Link包裹按钮，并把按钮类型设为button：

<div className="signup-container">
  <Link to="/Registration">
    <button type="button">Sign up</button>
  </Link>
</div>

3. 清理无效的组件导入 #

你的代码里import './UserPage';和import './Registration.js';这两行是无效的，路由跳转不需要提前导入目标组件，这些组件应该在路由配置文件里引入并关联路径。

修复后的完整代码 #

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';
import avatar from '../../avatar.png';
import Back from '../../Back.js';
import { Link, withRouter } from 'react-router-dom';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.isLoginPending && this.props.isLoginPending) {
      if (nextProps.isLoginSuccess) {
        this.props.history.push('/UserPage')
      } else {
        console.log(this.props.loginError)
      }
    }
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
      <div>
        <Back/>
        <header>
          <h1 className="log">Company Login</h1>
        </header>
        <form name="loginForm" onSubmit={this.onSubmit}>
          <div className="imgcontainer">
            <img src={avatar} alt={"Avatar"} className={"avatar"}/>
          </div>
          <div className="form-group-collection">
            <div className="form-group">
              <label>Username/User ID:</label>
              <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
            </div>
            <div className="form-group">
              <label>Password:</label>
              <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
            </div>
          </div>
          <br/>
          <input type="submit" value="Login" />
        </form>
        {/* 修正后的注册按钮区域 */}
        <div className="signup-container">
          <Link to="/Registration">
            <button type="button">Sign up</button>
          </Link>
        </div>
      </div>
    )
  }

  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({ username: '', password: '' });
  }
}

const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

LoginForm = withRouter(LoginForm);
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

最后确认路由配置 #

别忘了在你的应用路由入口文件里，确保已经为/Registration路径关联了Registration组件：

import Registration from './path/to/Registration.js';
// ...
<BrowserRouter>
  <Switch>
    <Route path="/login" component={LoginForm} />
    <Route path="/Registration" component={Registration} />
    {/* 其他路由规则 */}
  </Switch>
</BrowserRouter>

这样修改后，点击注册按钮就会正常跳转到Registration.js页面，不会再触发登录的动作了。

内容的提问来源于stack exchange，提问作者Sarah