URL не показывает текущую страницу

Question

Я пишу приложение реакции стартера, которое обеспечивает реагирование на устройство, имеет панель навигации со стандартными элементами навигации (о, контакт, регистрация, выход из системы и домашняя страница).Текущая страница изменяется на панели навигации, когда пользователь щелкает ссылку.Однако некоторые страницы не предназначены для изменения одним щелчком мыши.Одной из функций панели навигации является «Логин».Это вызывает компонент, называемый страницей входа.Как только пользователь пытается войти, AJAX-вызов выполняется для базы данных, чтобы проверить информацию для входа.Если все прошло успешно, я хочу загрузить страницу «Панель инструментов».Это работает, но поскольку я не нажимаю на ссылку в панели навигации, чтобы загрузить эту страницу, URL-адрес по-прежнему показывает «localhost / login» вместо «/ localhost / dashboard», даже когда отображается панель мониторинга.Я уверен, что проблема в том, что я не нажал на ссылку, чтобы попасть туда - это было сделано программно.Поэтому я пытаюсь программно изменить URL-адрес в этих случаях, чтобы он соответствовал отображаемой странице.

Я провел поиск в Google по программному изменению URL-адреса.Также искал на реаги-роутере и используя NavLink.Я попытался добавить операторы debug console.log в панель навигации, чтобы узнать, пытался ли я выполнить рендеринг после изменения активной страницы на панель инструментов.Я не уверен, что еще делать сейчас.Я новичок, чтобы реагировать (достаточно знаний, чтобы быть опасным)

Это из App.js.Это делает панель инструментов.Панель инструментов отображает панель навигации.Мое состояние поддерживается в App.js и передается другим компонентам как реквизиты.Код ниже не весь код, но я пытаюсь включить то, что необходимо, чтобы понять его, но не перегружать.

const initialState = {
  sideDrawerOpen: false,
  loggedIn: false,
  userID: "",
  fullName: "",
  activePage: "HOME_PAGE",
  pageBody: <Home />
};

class App extends Component {
  constructor() {
    super();
    this.state = initialState;
  }

...

callback function for login component

  loginCallback = (retCode, userID, fullName, message) => {
    switch (retCode) {
      // User logged in successfully
      case 0:
        alert(message);
        break;

      // ID not valid
      case 1:
        alert(message);
        break;

      // Password Must Be Changed
      case 2:
        alert(message);
        break;

      // User Locked Out
      case 3:
        alert(message);
        break;

      // Password Incorrect
      case 4:
        alert(message);
        break;

      // Database error
      default:
        alert(message);
        break;
    }

    let newState;

    if (retCode === 0) {
      newState = {
        sideDrawerOpen: this.state.sideDrawerOpen,
        loggedIn: true,
        userID: userID,
        fullName: fullName,
        activePage: "DASHBOARD_PAGE",
        pageBody: <Dashboard />
      };
    } else {
      newState = {
        sideDrawerOpen: this.state.sideDrawerOpen,
        loggedIn: false,
        userID: "",
        fullName: "",
        activePage: this.state.activePage,
        pageBody: this.state.pageBody
      };
    }

    this.setState(newState);
  };

appCallback function (when user clicks on navigation link).  This is passed to the Toolbar component which passes it through to the Navigation Bar component.

  appCallback = newActivePage => {
    let sdo = false;
    let li = this.state.loggedIn;
    let uid = this.state.userID;
    let fnm = this.state.fullName;
    let ap = this.state.activePage;
    let pb = this.state.pageBody;

    if (newActivePage === this.state.activePage) return;
    else {
      if (newActivePage === "REGISTER_PAGE") {
        ap = "REGISTER_PAGE";
        pb = <Register registerCallback={this.registerCallback} />;
      } else if (newActivePage === "LOGIN_PAGE") {
        ap = "LOGIN_PAGE";
        pb = (
          <Login
            loggedIn={this.state.loggedIn}
            userID={this.state.userID}
            fullName={this.state.fullName}
            loginCallback={this.loginCallback}
          />
        );
      } else if (newActivePage === "DASHBOARD_PAGE") {
        ap = "DASHBOARD_PAGE";
        pb = <Dashboard />;
      } else if (newActivePage === "HOME_PAGE") {
        ap = "HOME_PAGE";
        pb = <Home />;
      } else if (newActivePage === "ABOUT_PAGE") {
        ap = "ABOUT_PAGE";
        pb = <About />;
      } else if (newActivePage === "CONTACT_PAGE") {
        ap = "CONTACT_PAGE";
        pb = <Contact />;
      } else if (newActivePage === "LOGOUT_PAGE") {
        li = false;
        uid = "";
        fnm = "";
        ap = "HOME_PAGE";
        pb = <Home />;
      }

      let newState = {
        sideDrawerOpen: sdo,
        loggedIn: li,
        userID: uid,
        fullName: fnm,
        activePage: ap,
        pageBody: pb
      };

      this.setState(newState);
    }
  };


return (
      <div style={{ height: "100%" }}>
        <BrowserRouter>
          <Toolbar
            drawerClickHandler={this.drawerToggleClickHandler}
            appCallback={this.appCallback}
            loggedIn={this.state.loggedIn}
            activePage={this.state.activePage}
          />
          <SideDrawer
            show={this.state.sideDrawerOpen}
            appCallback={this.appCallback}
            loggedIn={this.state.loggedIn}
            activePage={this.state.activePage}
          />
          {backdrop}
          <div>{this.state.pageBody}</div>
        </BrowserRouter>
      </div>
    );

END of App.js code
Beginning of Toolbar.js

class Toolbar extends Component {
  myCallback = pageToShow => {
    this.props.appCallback(pageToShow);
  };

  render() {
    return (
      <div>
        <header className="toolbar">
          <nav className="toolbar__navigation">
            <div className="toolbar__toggle-button">
              <DrawerToggleButton click={this.props.drawerClickHandler} />
            </div>
            <div className="toolbar__logo">
              <a href="/">THE LOGO</a>
            </div>
            <div className="spacer" />
            <div>
              <Navigation
                tbCallback={this.myCallback}
                loggedIn={this.props.loggedIn}
                activePage={this.props.activePage}
              />
            </div>
          </nav>
        </header>
      </div>
    );
  }
}

export default Toolbar;
END of Toolbar Snippet.
Beginning of Navigation.js

const Navigation = props => {
  let cnREGISTER = "";
  let cnLOGIN = "";
  let cnLOGOUT = "";
  let cnHOME = "";
  let cnABOUT = "";
  let cnCONTACT = "";
  let cnDASHBOARD = "";

  console.log("in navigation.js");

  switch (props.loggedIn) {
    case true:
      cnREGISTER = "toolbar_navigation-items hidenavitem";
      cnLOGIN = "toolbar_navigation-items hidenavitem";
      cnLOGOUT = "toolbar_navigation-items shownavitem";

      if (props.activePage === "DASHBOARD_PAGE") {
        cnDASHBOARD = "toolbar_navigation-items-noselect shownavitem";
        console.log("DASHBOARD_PAGE is active page");
      } else cnDASHBOARD = "toolbar_navigation-items shownavitem";

      if (props.activePage === "HOME_PAGE")
        cnHOME = "toolbar_navigation-items-noselect shownavitem";
      else cnHOME = "toolbar_navigation-items shownavitem";

      if (props.activePage === "ABOUT_PAGE")
        cnABOUT = "toolbar_navigation-items-noselect shownavitem";
      else cnABOUT = "toolbar_navigation-items shownavitem";

      if (props.activePage === "CONTACT_PAGE")
        cnCONTACT = "toolbar_navigation-items-noselect shownavitem";
      else cnCONTACT = "toolbar_navigation-items shownavitem";
      break;

    case false:
      cnDASHBOARD = "toolbar_navigation-items hidenavitem";
      cnLOGOUT = "toolbar_navigation-items hidenavitem";

      if (props.activePage === "REGISTER_PAGE")
        cnREGISTER = "toolbar_navigation-items-noselect shownavitem";
      else cnREGISTER = "toolbar_navigation-items shownavitem";

      if (props.activePage === "LOGIN_PAGE")
        cnLOGIN = "toolbar_navigation-items-noselect shownavitem";
      else cnLOGIN = "toolbar_navigation-items shownavitem";

      if (props.activePage === "HOME_PAGE")
        cnHOME = "toolbar_navigation-items-noselect shownavitem";
      else cnHOME = "toolbar_navigation-items shownavitem";

      if (props.activePage === "ABOUT_PAGE")
        cnABOUT = "toolbar_navigation-items-noselect shownavitem";
      else cnABOUT = "toolbar_navigation-items shownavitem";

      if (props.activePage === "CONTACT_PAGE")
        cnCONTACT = "toolbar_navigation-items-noselect shownavitem";
      else cnCONTACT = "toolbar_navigation-items shownavitem";
      break;

    default:
      break;
  }

  return (
    <div>
      <div className={cnLOGOUT}>
        <NavLink
          to="/logoff"
          onClick={props.tbCallback.bind(this, "LOGOUT_PAGE")}
        >
          Logout
        </NavLink>
      </div>
      <div className={cnREGISTER}>
        <NavLink
          to="/register"
          onClick={props.tbCallback.bind(this, "REGISTER_PAGE")}
        >
          Register
        </NavLink>
      </div>
      <div className={cnLOGIN}>
        <NavLink
          to="/login"
          onClick={props.tbCallback.bind(this, "LOGIN_PAGE")}
        >
          Login
        </NavLink>
      </div>
      <div className={cnDASHBOARD}>
        <NavLink
          to="/dashboard"
          onClick={props.tbCallback.bind(this, "DASHBOARD_PAGE")}
        >
          Dashboard
        </NavLink>
      </div>
      <div className={cnHOME}>
        <NavLink to="/" onClick={props.tbCallback.bind(this, "HOME_PAGE")}>
          Home
        </NavLink>
      </div>
      <div className={cnABOUT}>
        <NavLink
          to="/about"
          onClick={props.tbCallback.bind(this, "ABOUT_PAGE")}
        >
          About
        </NavLink>
      </div>
      <div className={cnCONTACT}>
        <NavLink
          to="/contact"
          onClick={props.tbCallback.bind(this, "CONTACT_PAGE")}
        >
          Contact
        </NavLink>
      </div>
    </div>
  );
};

export default Navigation;
END of Navigation.js snippet.
Beginning of Login snippet (just the AJAX stuff and login callback)

  handleSubmit = e => {
    var retCode;
    var userID;
    var fullName;
    var message;
    var xhr;
    var jsonData;

    e.preventDefault();

    if (formValid(this.state)) {
      var self = this;
      console.log("Submitting Login Form");

      xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        // only run if request is complete
        if (xhr.readyState !== 4) return;

        // process the return data
        if (xhr.status >= 200 && xhr.status < 300) {
          // request is successful, process results
          jsonData = JSON.parse(xhr.responseText);
          console.log(jsonData);

          retCode = jsonData.returncode;
          userID = jsonData.userID;
          fullName = jsonData.fullname;
          message = jsonData.message;

          self.props.loginCallback(retCode, userID, fullName, message);
        }
      };

      xhr.open("POST", "/php/login.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(
        JSON.stringify({
          username: this.state.userName,
          password: this.state.password
        })
      );
    } else {
      console.log("Form Invalid");
    }
  };

Я ценю любые ответы, которые я получаю, как решить эту проблему.*

Я ожидаю увидеть URL "localhost / dashboard", когда отображаемая активная страница фактически является страницей панели.Отображаемая ссылка на самом деле является ссылкой на страницу входа "localhost / login"