在reactjs的表单中，在何处添加注册按钮？

在我的登录表单页面中，我想在靠近登录的地方添加注册按钮。。当我尝试添加注册按钮时，它执行与单击登录按钮时相同的操作。。所以请大家帮我补充一点。。这是我的loginform.js页面

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { login } from '../../redux/reducer';
    import './LoginForm.css';
    import './UserPage';
    import avatar from '../../avatar.png';
    import Back from '../../Back.js';
    import './Registration.js';
    import {withRouter,BrowserRouter as  Link  } 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>
  <form>
           <Link to={`/Registration`}>
           <button role="link">Sign up</button>
         </Link>
         </form>
         </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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../redux/reducer”导入{login}；
导入“./LoginForm.css”；
导入“./UserPage”；
从“../../avatar.png”导入头像；
从“../../Back.js”导入回；
导入“./Registration.js”；
从“react router dom”导入{withRouter，BrowserRouter as Link}；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.onSubmit=this.onSubmit.bind（this）；
}
组件将接收道具（下一步）{
if（！nextrops.isLoginPending&&this.props.isLoginPending）{
if（nextrops.isloginsucess）{
this.props.history.push（“/UserPage”）
}否则{
console.log（this.props.login错误）
}
}
}
render（）{
让{username，password}=this.state；
让{isLoginPending，IsLoginAccess，loginError}=this.props；
返回(
公司登录
用户名/用户ID：
this.setState（{username:e.target.value}）value={username}/>
密码：
this.setState（{password:e.target.value}）value={password}/>


注册
)
}
提交（e）{
e、 预防默认值（）；
让{username，password}=this.state；
this.props.login（用户名、密码）；
这是我的国家({
用户名：“”，
密码：“”
});
}
}
常量mapStateToProps=（状态）=>{
返回{
isLoginPending:state.isLoginPending，
IsLoginSAccess:state.IsLoginSAccess，
登录错误：state.login错误
};
}
const mapDispatchToProps=（调度）=>{
返回{
登录：（用户名，密码）=>dispatch（登录（用户名，密码））
};
}
LoginForm=withRouter（LoginForm）；
导出默认连接（mapStateToProps、mapDispatchToProps）（LoginForm）；

---

每当我点击注册按钮时，我想重定向到register.js页面。

您需要添加类似的内容，并且需要在路由配置中注册

  <Link to={`/register`}>
   <button role="link">Sign up</button>
  </Link>

注册

你正在使用提交类型的注册按钮吗？是的……我试过了。你能在这里添加html吗？对不起，我不明白你想要哪种代码。这是唯一一个与表单相关的页面。。此处没有html页面，而没有index.html..请使用signup buttonThanku@supra28更新上述代码，但它不会路由到注册页面。。单击“注册”按钮时，只会闪烁。。我用上面给出的代码更新了我的代码。。请看一看，我需要做什么更改？将此导入{withRouter，BrowserRouter as Link}从“react router dom”更改为“react router dom”；从“react router dom”导入{withRouter，Link}；