登录后，我试图重定向到特定的URL，但历史推送正在更改URL，但没有更新页面组件，我陷入了这个，组件UI不更新时，编程导航URL已更改，但UI仍然相同登录后，我试图重定向到特定的URL，但历史推送正在更改URL，但没有更新页面组件，我陷入了这个，组件UI不更新当编程导航URL已被更改，但UI仍然是相同的登录后，我试图重定向到特定的URL，但历史推送正在改变URL，但不更新页面组件，我坚持到这一点，组件UI不更新当编程导航URL已更改，但UI仍然相同登录后，我试图重定向到特定的URL，但历史推送正在更改URL，但不更新页面组件i我陷入了这个，组件UI不更新时，编程导航URL已更改，但UI仍然是相同的

import React, { Component } from "react";
import { Route } from "react-router";
import { BrowserRouter as Router, Routes } from "react-router-dom";
import { NavBar } from "./NavBar";
import { ShoppinCart } from "./ShoppinCart";
import { TaskQuantity } from "./TaskQuantity";
import { CustomersList } from "./CustomersList";
import { Login } from "./Login";
import { Dashboard } from "./Dashboard";
import { FourZeroFour } from "./FourZeroFour";
import history from "./history";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }

  render() {
    return (
      <Router history={history}>
        <NavBar
          isLoggedIn={this.state.isLoggedIn}
          UpdateLoginStatus={this.UpdateIslogedInStatus}
        />
        <div className="container">
          <Routes>
            <Route
              path="/"
              exact
              Component={(props) => (
                <Login
                  {...props}
                  UpdateIslogedInStatus={this.UpdateIslogedInStatus}
                />
              )}
            />
            <Route path="/Dashboard" exact element={<Dashboard />} />
            <Route path="/Customers" exact element={<CustomersList />} />
            <Route path="/cart" exact element={<ShoppinCart />} />
            <Route path="/Quantity" exact element={<TaskQuantity />} />
            <Route path="*" element={<FourZeroFour />} />
          </Routes>
        </div>
      </Router>
    );
  }

  UpdateIslogedInStatus = (status) => {
    this.setState({ isLoggedIn: status });
  };
}



import React, { Component } from "react";
import history from "./history";

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <div className="d-flex justify-content-center">
          <form className="pt-5">
            <div className="mb-3">
              <label htmlFor="exampleInputEmail1" className="form-label">
                Email address
              </label>
              <input
                type="email"
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                autoComplete="off"
                defaultValue={this.state.email}
                onChange={(event) => {
                  this.setState({ email: event.target.value });
                }}
              />
              <div id="emailHelp" className="form-text">
                We'll never share your email with anyone else.
              </div>
            </div>
            <div className="mb-3">
              <label htmlFor="exampleInputPassword1" className="form-label">
                Password
              </label>
              <input
                type="password"
                className="form-control"
                id="exampleInputPassword1"
                autoComplete="off"
                defaultValue={this.state.password}
                onChange={(evnet) => {
                  this.setState({ password: evnet.target.value });
                }}
              />
            </div>

            {this.state.message}

            <button
              type="button"
              className="btn btn-primary"
              onClick={this.onLoginClick}
            >
              Submit
            </button>
          </form>
        </div>
      </div>
    );
  }

  onLoginClick = async () => {
    let { history } = this.props;
    let response = await fetch(
      `http://localhost:5000/users?email=${this.state.email}&password=${this.state.password}`,
      {
        method: "GET",
      }
    );
    let body = await response.json();
    if (body.length > 0) {
      this.setState({
        message: (
          <div className="alert alert-success" role="alert">
            Logged In Successfully!
          </div>
        ),
      });
      this.props.UpdateIslogedInStatus(true);
      // history.push("/Dashboard");
      console.log(history);
    } else {
      this.setState({
        message: (
          <div className="alert alert-danger" role="alert">
            Please Enter Valid Credentials!
          </div>
        ),
      });
    }
  };
}