反应导航页面

Question

我试图在单击按钮时导航页面。

这是我的代码，不起作用；

import "bootstrap/dist/css/bootstrap.min.css";
import "./LoginPage.css";

class LoginPage extends Component {

  render() {
    const style = {
      margin: "15px 0",
    };
    return (
      <div className="d-grid gap-2 mt-3">
        <button
          type="submit"
          className="btn btn-primary"
          onClick={this.getAuthentication}>
          Enter
        </button>
      </div>
    );
  }
  getAuthentication() {
    this.props.navigation.navigate('/staff')
  }
}
export default LoginPage;

当我在浏览器中访问 http://localhost:3000/staff 时，它工作正常。但是当我尝试使用按钮进行导航时，单击它不起作用。

我正在使用我搜索了一整天的类组件，但没有找到任何解决方案。如有任何帮助，我们将不胜感激。

Answer 1

您可以使用“react-router-dom”进行导航，但它必须是一个功能组件。 如果你想使用基于类的组件，你可以像这样组合它们：

import { Component } from "react";
import { useNavigate } from "react-router-dom";

class LoginPage extends Component { 

render() {
const { navigate } = this.props;

  return (    
          <div className="d-grid gap-2 mt-3">
            <button
              type="submit"
              className="btn btn-primary"
              onClick={()=>navigate('/register')}
            >
              Enter
            </button>
          </div>            
  );
}    
}

   export default function Login() {
  const navigate = useNavigate();
  return (
    <LoginPage navigate={navigate}/>
  );
}