在 ReactJS 中登录后路由时出现 404 错误

Question

从当前页面登录后，我正在从当前页面路由到仪表板。

但是路由后，它显示找不到页面。 然后刷新页面仪表板开始显示。

我知道这背后的原因。 因为我已经修复了从 sessionStorage 到 U_Id 的路径。 因此，最初它没有获取 U_Id，而是在刷新存储在 session 中的 U_Id 之后。

但是我找不到解决方案，即如何在登录后不刷新就显示我的仪表板。

export class SignIn extends Component {
  organizationData = new Organization();
  constructor(props) {
    super(props);
    this.state = {
      Email: "",
      Password: "",
      redirect: false,
    };
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmailChange(event) {
    this.setState({ Email: event.target.value });
  }

  handlePasswordChange(event) {
    this.setState({ Password: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    axios
      .post("http://localhost:8002/Organization/auth", {
        Email: this.state.Email,
        Password: this.state.Password,
      })
      .then((response) => {
        console.log(response);
        if (response.data.status) {
          this.organizationData.setUId = response.data.message.U_Id;
          this.organizationData.setToken = response.data.token;
          sessionStorage.setItem(
            "U_Id",
            JSON.stringify(this.organizationData.getUId)
          );
          sessionStorage.setItem(
            "token",
            JSON.stringify(this.organizationData.getToken)
          );
          this.props.history.push(
            `/${sessionStorage.getItem("U_Id")}/dashboard`
          );
        }
      });
  }

  render() {
    if (this.state.redirect) {
      return <Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />;
    }
    return (
      <div className="sign-in-container">
        <div className="sign-in-inner">
          <h3>Welcome To</h3>
          <h1>PRACTICA</h1>
        </div>
        <div className="sign-in-input">
          <h2>SIGN IN</h2>
          <div className="sign-in-input-inner">
            <input
              className="input"
              value={this.state.Email}
              onChange={this.handleEmailChange}
              type="email"
              placeholder="University Id or Email"
            />
            <input
              className="input"
              type="password"
              value={this.state.Password}
              onChange={this.handlePasswordChange}
              placeholder="Password"
            />
            <div
              onClick={this.handleSubmit}
              className="sign-in-button-container"
            >
              Login In
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(SignIn);

路由文件

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      U_Id: sessionStorage.getItem("U_Id"),
    };
  }

  componentWillMount() {
    this.setState({ U_Id: sessionStorage.getItem("U_Id") });
  }

  render() {
    return (
      <div className="app">
        <Router>
          <Switch>
            <Route exact path="/">
              <Header />
              <Body />
              <Footer />
            </Route>
            <Route exact path="/sign-in">
              {sessionStorage.getItem("token") ? (
                <Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />
              ) : (
                <>
                  <Header />
                  <Login />
                </>
              )}
            </Route>
            <Route exact path={`/${sessionStorage.getItem("U_Id")}/dashboard`}>
              <Dashboard item="home" />
            </Route>
            <Route
              exact
              path={`/${sessionStorage.getItem("U_Id")}/dashboard/upcommings`}
            >
              <Dashboard item="upcomming" />
            </Route>
            <Route
              exact
              path={`/${sessionStorage.getItem("U_Id")}/dashboard/setting`}
            >
              <Dashboard item="setting" />
            </Route>
            <Route
              exact
              path={`/${sessionStorage.getItem("U_Id")}/dashboard/privacy`}
            >
              <Dashboard item="privacy" />
            </Route>
            <Route exact path="/sign-up/redirect">
              <Header />
              <SignUpRedirect />
            </Route>
            <Route exact path="*">
              <Header />
              <PageNotFound />
            </Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

Answer 1

试试这个方法——

```<Redirect
 to={{
 pathname: '/dashboard',
  state: { U_ID: this.organizationData.getUId }
}} />;
    }}

在您的仪表板组件中，您可以访问 U_ID

 this.props.location.state.U_ID