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

Question

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

这是登录页面：

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);

我的App.js:

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;

还有我的认证页面：

import React, { useCallback, useContext, useEffect, useState } from "react";
const axios = require("axios");

const AuthContext = React.createContext();

export function ProvideAuth({ children }) {
    const auth = useProvideAuth();

    return (
        <AuthContext.Provider value={auth}>
            {children}
        </AuthContext.Provider>
    )
}

export const useAuth = () => {
    return useContext(AuthContext);
}

function useProvideAuth() {
    const [user, setUser] = useState(null);
    
    const signin = (username, password) => {
        try {
            axios.post('http://localhost:5000/user/login', {username: username.value, password: password.value})
                .then(response => {
                    localStorage.setItem("userToken", JSON.stringify(response.data.token));
                    setUser(JSON.stringify(response.data.token));
                })
                .catch(error => {
                    setUser(null);
                    alert(error);
                });  
        } catch (error) {
            alert(error);
        }

        return user;
    };

    const signup = (username, password) => {
            axios.post('http://localhost:5000/user/register', {username: username.value, password: password.value})
                .catch(error => {
                    alert(error);
                });  
        
        return user;
    };

    const signout = () => {
        localStorage.clear();
        setUser(null);
        return null;
    };

    return {
        user,
        signin,
        signup,
        signout
    };
}

Answer 1

您可以使用 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 } = event.target.elements;
  const userVar = auth.signin(username, password);
  !userVar ? history.push("/register") : history.push("/");
};

您可以阅读 useHistory() 挂钩 here

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

How to implement conditional Redirects in ReactJS?

javascript

reactjs

mern

react-router-dom