2

在我的登录屏幕上，我为登录或注册按钮呈现引导模式。在这个里面Modal我有一个像这样的 onSubmit 表单

transitionTo(event) {
  event.preventDefault();
  console.log('You Changed the URL');
  // this.context.router.transitionTo('/about');
  <Link to="/about"/>
}

我/about的他在我的内部定义Router：

<Router>
    <div>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route path="/about" component={About}/>
            <Route component={NotFound}/>
        </Switch>
    </div>
</Router>

但是单击提交按钮时，我的登录页面会使用此 URL 刷新：localhost:3000/?

我用的是react-router4。

编辑：添加表格

[...]

<form onSubmit={(e) => this.test(e)}>
    <FormGroup>
        <FormControl
         required
         type="email"
         placeholder="Email"
         id="email">
        </FormControl>
        <FormControl
         required
         type="password"
         placeholder="Password"
         id="password">
        </FormControl>
        <Button
         bsClass="btn btn-default btn-login"
         type="submit">
             Login
        </Button>
    </FormGroup>
</form>

[...]

编辑2：

import React, { Component } from 'react';
import { Modal, FormGroup, FormControl, Button } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import './LoginModal.css'


class LoginModal extends Component {
  // constructor(){
  //   super()
  // }


test(event) {
  console.log('You Changed the URL');
  // this.context.router.transitionTo('/about');
  // <Link to="/about"/>
  history.push('/about')
}

  render() {

      return (
        <Modal show={this.props.open} onHide={this.props.close}>
          <Modal.Header closeButton>
            <Modal.Title>
              Login
            </Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <div className="box">
              <div className="content">
                <div className="error"></div>
                <div className="form loginBox">
                  <form onSubmit={(e) => this.test(e)}>
                    <FormGroup>
                      <FormControl
                        required
                        type="email"
                        placeholder="Email"
                        id="email">
                      </FormControl>
                      <FormControl
                        required
                        type="password"
                        placeholder="Password"
                        id="password">
                      </FormControl>
                      <Button
                        bsClass="btn btn-default btn-login"
                        type="submit">
                        Login
                      </Button>
                    </FormGroup>
                  </form>
                </div>
              </div>
            </div>
          </Modal.Body>

          <Modal.Footer>
            <span>Looking to
              <a href=""> create an account</a>
            </span>
        </Modal.Footer>
      </Modal>
      )
  }
}

export default withRouter(LoginModal)
4

1 回答 1

1

您可以尝试使用高阶组件withRouter并push使用所需的路线。您还需要history从Component props调用：

class LoginModal extends Component {
  test(event) {
    this.props.history.push('/about')
  }
}
于 2017-03-24T14:38:42.037 回答