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

如何解决在 ReactJS 中登录后路由时出现 404 错误

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

我知道这背后的原因。 因为我已经修复了从 sessionStorage 到 U_Id 的路径。因此最初它没有得到 U_Id，而是在刷新存储在会话中的 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>
    );
  }
}

解决方法

试试这个方法-

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

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

 this.props.location.state.U_ID