reactjs 使用react-router-dom将一个组件路由到另一个组件时出现错误,

6l7fqoea  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(122)

我在react中创建了一个基本的日志页面,在登录时它会将我重定向到下一个组件,我使用react-router v5.3,它显示错误无法读取未定义的属性(阅读'push')我如何解决此错误

import React, {useState} from 'react'
import {useHistory,} from 'react-router-dom';

    export default function Loginpage() {
    const history = useHistory();

    //set the initial sate for the inputs
    const [username, setusername] = useState('');
    const [password, setpassword] = useState('');

    //function to handle form submission
    const handleFormSubmit = (event) => {

        event.preventDefault();// prevent from refreshing the page

        //checck the user name and password 
        if (username === 'employee' && password === 'emp123'){
            history.push('./components/JobFindPage');
            alert('hii');
        }
        else  if (username === 'employer' && password === 'emr123'){
            history.push('/CreateJobPage');
            alert('hii');
        }
        else{
            alert ('wrong username or password')
        }
    }

    return (
        <>
            <form onSubmit = {handleFormSubmit}>
                <label>
                    Username :
                    <input type="text" value={username} onChange={(e) => setusername(e.target.value)} /> <br />
                </label>
                <label>
                    Password :
                    <input type="text" value={password} onChange={(e) => setpassword(e.target.value)} /> <br />
                </label>
                <button type="submit">Log IN</button>
            </form>
        </>
    );
}

我希望使用历史推送(/component)将我重定向到该组件

fnx2tebb

fnx2tebb1#

该应用程序缺少渲染路由器以提供路由上下文和history对象。
导入路由器并 Package App组件。
示例:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

由于您正在使用react@18并将应用渲染到React.StrictMode组件中,因此您还需要至少***转换到***react-router-dom@5.3.3以解析compatibility issue between React 18 and RRDv5
Login组件还应导航到应用正在呈现路由的路径。history.push("./components/JobFindPage");将错误地将"/components/JobFindPage"附加到当前URL路径的末尾。

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

export default function LoginPage() {
  const history = useHistory();

  //set the initial sate for the inputs
  const [username, setusername] = useState("");
  const [password, setpassword] = useState("");

  //function to handle form submission
  const handleFormSubmit = (event) => {
    event.preventDefault(); // prevent from refreshing the page

    //checck the user name and password
    if (username === "employee" && password === "emp123") {
      history.push("/JobFindPage"); // <-- fix this path
      alert("hii");
    } else if (username === "employer" && password === "emr123") {
      history.push("/CreateJobPage");
      alert("hii");
    } else {
      alert("wrong username or password");
    }
  };

  return (
    <>
      <form onSubmit={handleFormSubmit}>
        <label>
          Username :
          <input
            type="text"
            value={username}
            onChange={(e) => setusername(e.target.value)}
          />{" "}
          <br />
        </label>
        <label>
          Password :
          <input
            type="text"
            value={password}
            onChange={(e) => setpassword(e.target.value)}
          />{" "}
          <br />
        </label>
        <button type="submit">Log IN</button>
      </form>
    </>
  );
}

相关问题