URL不显示当前页面

时间：2019-05-18 15:35:55

标签： reactjs react-router

我正在编写一个入门响应应用程序，该应用程序可为设备提供响应，并具有一个带有标准导航项（关于，联系，注册，登录注销和主页）的导航栏。当用户单击链接时，当前页面将在导航栏中更改。但是，某些页面不希望通过单击来更改。导航栏功能之一是“登录”。这将调用称为“登录”页面的组件。用户尝试登录后，将对数据库进行AJAX调用以验证登录信息。如果成功，我要加载“仪表盘”页面。这可行，但是因为我没有单击导航栏中的链接来加载此页面，所以即使显示了仪表板，URL仍然显示“ localhost / login”而不是“ / localhost / dashboard”。我很确定问题是因为我没有单击链接到达那里-它是通过​​编程完成的。因此，在这种情况下，我试图通过编程方式更改URL，以匹配显示的页面。

我已经完成了以编程方式更改网址的Google搜索。还在react-router上搜索并使用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”。显示的URL实际上是登录页面“ localhost / login”的URL

0 个答案:

没有答案
相关问题
最新问题