如何在 ReactJS 中实现条件重定向？

如何解决如何在 ReactJS 中实现条件重定向？

所以我有一个基本的逻辑页面，用户可以在其中输入他们的凭据。如果它们有效，它们将被重定向到私人主页。如果没有，他们将被重定向到注册页面。我的身份验证挂钩工作正常，因此当用户输入正确的凭据时，他们会按预期重定向到主页。问题是当他们没有注册时，他们不会被重定向到注册页面。我不知道为什么一个会奏效，而另一个不行。

这是登录页面：

git commit

我的 App.js：

import { withRouter,Redirect,Route} from "react-router-dom";
import { useAuth } from "../auth";

const LoginPage = ({ children,history,...rest }) => {
    const auth = useAuth();

    const handleLogin = (
        (event) => {
            event.preventDefault();
            const {username,password} = event.target.elements;
            const userVar = auth.signin(username,password);

            return (
                <Route
                    {...rest}
                    render={() =>
                        !userVar ? ( <Redirect to="/register"/> ) : ( <Redirect to="/"/> )
                    }
                />
            );
        }
    );

    if(auth.user)
        return <Redirect to="/" />

    return (
        <div>
            <h1>Log in</h1>
            <form onSubmit={handleLogin}>
                <label>
                    Username
                    <input name="username" type="username" placeholder="Username"/>
                </label>
                <br></br>
                <label>
                    Password
                    <input name="password" type="password" placeholder="Password"/>
                </label>  
                <br></br>
                <button type="submit">Log in</button>
                </form>
                
        </div>
        
    );
};

export default withRouter(LoginPage);

我的主页：

import React from 'react';
import { BrowserRouter as Router,Route,Switch } from "react-router-dom";
import HomePage from "./components/home.component"
import RegisterPage from "./components/register-user.component";
import LoginPage from "./components/login-user.component";
import { ProvideAuth } from "./auth";
import PrivateHome from "./PrivateHome.js";
import NewChat from "./components/new-chat.component";
import Logout from "./components/logout.component"



function App() {
  
  return (
    <ProvideAuth>
      <Router>
        <Switch>
            <Route exact path="/login">
              <LoginPage />
            </Route>

            <Route exact path="/register">
              <RegisterPage />
            </Route>

            <PrivateHome exact path="/">
              <HomePage />
              <Route path="/chat/create">
                <NewChat />
              </Route>
              <Route path="/logout">
                <Logout />
              </Route>
            </PrivateHome>
        </Switch>
      </Router>
    </ProvideAuth>
  );
}

export default App;

还有我的认证页面：

import React from "react";
import { Route,Redirect } from "react-router-dom";
import { useAuth } from "./auth";

const PrivateHome = ({ children,...rest}) => {
    const auth = useAuth();

    return (
        <Route
            {...rest}
            render={() => 
            (auth.user != null) ? (
                    children
                ) : (
                    <Redirect to="/login"/>
                )
            }
        />
    );
}

export default PrivateHome;

解决方法

您可以使用来自 React Router 的 usehistory()：

import { withRouter,Redirect,Route,useHistory } from "react-router-dom";

const history = useHistory();

const handleLogin = (event) => {
  event.preventDefault();
  const { username,password } = event.target.elements;
  const userVar = auth.signin(username,password);

  return (
    <Route
      {...rest}
      render={() =>
        !userVar ? history.push("/register") :  history.push("/")
      }
    />
  );
};

history.push() 推送路线并导航到它。

我相信即使这样也适用于您的情况：

const handleLogin = (event) => {
  event.preventDefault();
  const { username,password);
  !userVar ? history.push("/register") : history.push("/");
};

您可以阅读有关 useHistory() 钩子 here