[React][Router] onSubmit Form 不跳转到页面

Question

在我的登录屏幕上，我为登录或注册按钮渲染了一个 bootstrap 模式。在这个 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-router 4.

编辑：添加表格

[...]

<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)

Answer 1

您可以尝试使用 higher-order 组件 withRouter 和 push 到所需的路线。您还需要从 Component props:

调用 history

class LoginModal extends Component {
  test(event) {
    this.props.history.push('/about')
  }
}

[React][Router] onSubmit Form 不跳转到页面

[React][Router] onSubmit Form doesn't go to the page

hyperlink

reactjs

react-router-v4