props.history.push() 不起作用。无法路由

Question

我正在尝试学习 GraphQL。但我被困在props.history.push。我无法将其路由到另一个页面。

Register.js

import React, { useState }  from 'react'
import {  Row, Col, Form, Button } from 'react-bootstrap'
import { gql, useMutation } from '@apollo/client';

const REGISTER_USER = gql`
  mutation register(
    $username: String!
    $email: String!
    $password: String!
    $confirmPassword: String!
  ) {
    register(
      username: $username
      email: $email
      password: $password
      confirmPassword: $confirmPassword
    ) {
      username
      email
      createdAt
    }
  }
`

export default function Register(props) {
  const [variables, setVariables] = useState({
    email: '',
    username: '',
    password: '',
    confirmPassword: '',
  })
  const [errors, setErrors] = useState({})

  const [registerUser, { loading }] = useMutation(REGISTER_USER, {
    update: (_, __) => props.history.push('/login'),
    onError: (err) => setErrors(err.graphQLErrors[0].extensions.errors),
  })

  const submitRegistrationForm= (e) => {
    e.preventDefault()

    registerUser({ variables })
  }

    return (
        <Row className="bg-white py-5 justify-content-center">
        <Col sm={8} md={6} lg={4} >

          <h1 className="text-center">
            Register
          </h1>

          <Form onSubmit={submitRegistrationForm}>
          <Form.Group className="mb-3">
            <Form.Label className={errors.email && 'text-danger'}>
              {errors.email ?? 'Email address'}
            </Form.Label>
            <Form.Control
              type="email"
              value={variables.email}
              className={errors.email && 'is-invalid'}
              onChange={(e) =>
                setVariables({ ...variables, email: e.target.value })
              }
            />
            
          </Form.Group>
          <Form.Group className="mb-3">
            <Form.Label className={errors.username && 'text-danger'}>
              {errors.username ?? 'Username'}
            </Form.Label>
            <Form.Control
              type="text"
              value={variables.username}
              className={errors.username && 'is-invalid'}
              onChange={(e) =>
                setVariables({ ...variables, username: e.target.value })
              }
            />
          </Form.Group>
          <Form.Group className="mb-3">
            <Form.Label className={errors.password && 'text-danger'}>
              {errors.password ?? 'Password'}
            </Form.Label>
            <Form.Control
              type="password"
              value={variables.password}
              className={errors.password && 'is-invalid'}
              onChange={(e) =>
                setVariables({ ...variables, password: e.target.value })
              }
            />
          </Form.Group>
          <Form.Group className="mb-3">
            <Form.Label className={errors.confirmPassword && 'text-danger'}>
              {errors.confirmPassword ?? 'Confirm password'}
            </Form.Label>
            <Form.Control
              type="password"
              value={variables.confirmPassword}
              className={errors.confirmPassword && 'is-invalid'}
              onChange={(e) =>
                setVariables({
                  ...variables,
                  confirmPassword: e.target.value,
                })
              }
            />
          </Form.Group>

            <div className="text-center">
              <Button variant="success" type="submit" disables={loading}>
                  {loading ? 'loading..':'Register'}
               
              </Button>
            </div>
          </Form>

        </Col>
      </Row>
    )
}

App.js

import React from 'react';
import { Container} from 'react-bootstrap';
import {BrowserRouter, Route, Routes} from 'react-router-dom';

import ApolloProvider from "./ApolloProvider";

import './App.scss';

import Home from "./pages/Home";
import Register from "./pages/Register";
import Login from "./pages/Login";


function App() {


  return (
    <ApolloProvider>
      <BrowserRouter>
        <Container className="pt-5">
          <Routes>
          <Route  exact path="/" element={<Home />}/>
          <Route path="/register"  element={<Register />} />
          <Route path="/login"  element={<Login />} />
          </Routes>
        </Container>
      </BrowserRouter>
    </ApolloProvider>
  );
}

export default App;

我能够获取 mySQL 表中的条目，但注册后我无法重定向到 /login。

我在控制台中得到TypeError。但我不确定我为什么会得到这个。

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.5.7",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "bootstrap": "^5.1.3",
    "graphql": "^16.2.0",
    "node-sass": "^7.0.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

使用"react-router-dom" 的 v6。

Answer 1

import {useHistory} from "react-router-dom";

export default function Register(props) {

  const history = useHistory();
  
  const [registerUser, { loading }] = useMutation(REGISTER_USER, {
    update: (_, __) => history.push('/login'),
    onError: (err) => setErrors(err.graphQLErrors[0].extensions.errors),
  })

  .
  .
  .

}

试试这个，使用来自react-router-dom的useHistory钩子