如何在 ReactJS 中登錄頁面后重定向/轉到用戶配置文件

Question

一旦用戶使用有效的username和password登錄，我就會嘗試重定向到User Profile頁面

但是當我單擊Login按鈕時，它不會轉到User Profile （但它會按預期更改url ( http://localhost:3000/instructor/banuka )

它還應該顯示它沒有的InstructorLoginFormComponent 。 當我點擊什么都沒有發生但我能看到的仍然是login頁面

這是我的InstructorLoginForm.jsx

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import InstructorProfile from "./instructor-profile";
import InstructorLoginFormComponent from "./instructor-login-form-component";

export default class InstructorLoginForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: "",
      password: ""
    };

    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  onChangeUsername(e) {
    this.setState({
      username: e.target.value
    });
  }

  onChangePassword(e) {
    this.setState({
      password: e.target.value
    });
  }

  handleOnClick(e) {
    e.preventDefault();
    const path = `/instructor/${this.state.username}`;
    this.props.history.push(path);
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route
            exact
            path="/login"
            component={props => (
              <InstructorLoginFormComponent
                {...props}
                username={this.state.username}
                password={this.state.password}
                handleOnClick={this.handleOnClick}
                onChangeUsername={this.onChangeUsername}
                onChangePassword={this.onChangePassword}
              />
            )}
          />
          <Route
            path={"/instructor/:instructorId"}
            component={InstructorProfile}
          />
        </Switch>
      </Router>
    );
  }
}

這是InstructorLoginFormComponent.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class InstructorLoginFormComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="container h-100" style={{ marginTop: 100 }}>
        <div className="d-flex justify-content-center h-100">
          <div className="user_card bg-dark">
            <div className="d-flex justify-content-center">              
            </div>
            <div
              className="d-flex justify-content-center form_container"
              style={{ marginTop: 0 }}
            >
              <form>
                <div className="input-group mb-3">
                  <div className="input-group-append">
                    <span className="input-group-text bg-info">
                      <i className="fa fa-user" />
                    </span>
                  </div>
                  <input
                    value={this.props.username}
                    onChange={this.props.onChangeUsername}
                    type="text"
                    name="username"
                    className="form-control input_user"
                    placeholder="username"
                  />
                </div>
                <div className="input-group mb-2">
                  <div className="input-group-append">
                    <span className="input-group-text bg-info">
                      <i className="fa fa-lock" />
                    </span>
                  </div>
                  <input
                    value={this.props.password}
                    onChange={this.props.onChangePassword}
                    type="password"
                    name="password"
                    className="form-control input_user"
                    placeholder="password"
                  />
                </div>
                <div className="form-group">
                  <div className="custom-control custom-checkbox">
                    <input
                      type="checkbox"
                      className="custom-control-input"
                      id="customControlInline"
                    />
                    <label
                      className="custom-control-label"
                      htmlFor="customControlInline"
                      style={{ color: "#ffffff" }}
                    >
                      Remember me
                    </label>
                  </div>
                </div>
              </form>
            </div>

            <div className="d-flex justify-content-center mt-3 login_container">
              <Link
                to={`/instructor/${this.props.username}`}
                type="button"
                className="btn login_btn bg-info"
              >
                Login
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

這是InstructorProfile.jsx

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

export default class InstructorProfile extends Component {
  render(){
      return(
          <div>
              <h1>Welcome to the profile</h1>
          </div>
      );
  }
}

有人可以告訴我哪里出錯了，並建議我在登錄驗證后重定向的好方法嗎？

Answer 1

按原樣解決

您遇到的問題可能與您的路由器配置不正確有關。 如果您希望InstructorLoginFormComponent在路徑/上呈現，則必須將其放入如下所示的路徑中。 您不能只將引用傳遞給組件，因為您需要將用戶名、密碼等屬性傳遞給它。 您應該從渲染函數中的任何其他地方刪除它，因為您只希望它在路徑為/時渲染。 我還更改了您的講師路徑以使用:id 。 當要指定 url 參數時，需要使用語法/<my_url>:<my_variable_name> 。 將/放在所有路徑的前面很重要，因為如果不這樣做，它就是一個相對路徑。

新路由器組件

<Router>
  <Switch>
    <Route exact path="/login" render={props => (
      <InstructorLoginFormComponent
        {...props}
        username = { this.state.username }
        password = { this.state.password }
        handleOnClick = { this.handleOnClick }
        onChangeUsername = { this.onChangeUsername }
        onChangePassword = { this.onChangePassword }
      />
    )} />          
    <Route path={"/instructor/:instructorId"} component={InstructorProfile} />
  </Switch>
</Router>

更新了 handleOnClick

handleOnClick(e) {
  e.preventDefault();
  const path = `/instructor/${this.state.username}`;
  this.props.history.push(path);
}

更新登錄按鈕

<Link
  to={`/instructor/${this.props.username}`}
  type="button"
  className="btn login_btn bg-info"
>
Login
</Link>

關於登錄的建議

需要注意的是，您實際上並沒有根據服務器上的內容檢查用戶名和密碼，這一點很重要。 我不確定這是否是您的測試代碼，或者您是否打算使用 REST 實現某些內容。 但是，您應該使用按鈕而不是在單擊時調用函數的鏈接，該函數將用戶名和密碼發送到服務器。 從那里，如果憑據匹配以及用戶是否能夠登錄，它將返回。 然后，你會使用

this.props.history.push(`instructor/${this.state.username}`);

將用戶轉發到教師個人資料頁面。 但是，您只會在檢查了他們的憑據后才想這樣做。 您不會使用Link組件來執行這些操作。 我在下面舉了一個例子。

登錄按鈕示例

<button
  type="button"
  className="btn login_btn bg-info"
  onClick={this.props.handleOnClick}
>
Login
</button>

新的 handleOnClick

handleOnClick = async (e) => {
  e.preventDefault();
  //pseudo-code below
  const user = await checkUserCredentialsAndGetUserObject(this.state.username, this.state.password);
  if(user.response === 'success') {
    this.setState({ user });
    this.props.history.push(`/instructor/${this.state.username}`);
  } else {
    flashMessage('The user credentials you entered were incorrect.');
  }
}

Answer 2

好吧，我不太確定你在問什么，但我想我知道你哪里錯了。

首先，當您使用確切的關鍵字上的路線，它會從字面上只有當顯示的URL匹配。 因此，如果您希望 LoginFormComponent 除另一個之外顯示，則需要刪除精確關鍵字。

接下來，對於動態渲染配置文件頁面，您沒有遵循 React Router 的工作原理。

本教程提供了一個很好的概述： https : //tylermcginnis.com/react-router-url-parameters/

簡而言之，對於個人資料頁面，路徑應該是

<Route path='/instructor/:username' component={InstructorProfile} />

然后，在配置文件組件中，通過訪問 URL 中的用戶名來設置初始狀態

this.state = {
  user: props.match.params.username
}

這個問題有點含糊，但我認為這將有助於您嘗試做的事情。 如果有不清楚的地方，請告訴我。