javascript - 如何使用 react-router-dom V5 重定向登录页面

Question

我正在使用 react-router-dom 5.2.0 在 create-react-app 中进行路由。我正在尝试使用 react-router 来执行重定向和保护路由。

着陆页是/。此页面包含登录/注册。

如果登录成功，页面应该重定向到/home。与此同时，/home 和 /explore 路径现在应该可用了。

目前，我正在使用 state (redux) 管理登录状态。变量 authState 包含 isUserLoggedIn 状态。如果 isUserLoggedIn 为真，则表示用户已登录。如果提交的登录表单的用户名和密码分别为“test”和“test”，我将更新 isUserLoggedIn 为真。默认情况下 isUserLoggedIn 为 false。因此，当 isUserLoggedIn 变为 true 时，页面应该从 / 重定向到 /home 而这并没有发生。

经过大量搜索，我发现(并使用了)以下代码。尽管这在 isUserLoggedIn 状态设置为 false 时保护了我的路由；但是，它不会在成功登录后将页面重定向到 /home。

我在这里做错了什么？另外，我在网上找不到足够体面的解释。如果您能解释发生了什么，我将不胜感激。

/** @jsx jsx */
/** @jsxFrag React.Fragment */
import { jsx, css } from "@emotion/core"
import tw from "twin.macro"
import "tailwindcss/dist/base.css"

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
  useHistory,
  useLocation,
} from "react-router-dom"

import React, { Fragment, Component } from "react"
import { useSelector } from "react-redux"

import Navbar from "./components/Navbar"
import Landing from "./features/landing/Landing"
import Home from "./features/home/Home"
import Explore from "./features/explore/Explore"

import { selectorAuth } from "./authSlice"

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)

  return (
    <Route
      {...rest}
      render={props =>
        authState.isUserLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location },
            }}
          />
        )
      }
    />
  )
}

const App = () => {
  return (
    <Router>
      <div tw="flex flex-col bg-green-100 min-h-screen">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Landing} />
          <PrivateRoute path="/home" component={Home} />
          <PrivateRoute path="/explore" component={Explore} />
        </Switch>
      </div>
    </Router>
  )
}

export default App

这是 code .

Answer 1

您没有返回到您尝试访问的原始组件的原因是，即使您将状态作为 props.location 传递，您也没有使用它在登录或注册后重定向回来

分级登陆页面中的位置状态并传递给您的 ModalLogin 和 ModalSignup 组件

const Landing = () => {
  const [loginModalBool, setLoginModalBool] = useState(false)
  const [signupModalBool, setSignupModalBool] = useState(false)
  const location = useLocation();
  const imageUrl =
    window.innerWidth >= 650 ? desktop_wallpaper : mobile_phone_wallpaper

  return (
    <div
      css={[
        tw`flex flex-1 flex-col items-center justify-around h-screen w-full`,
        css`
          background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url(${imageUrl});
          ${tw`bg-auto bg-cover bg-center bg-no-repeat`}
        `,
      ]}
    >
      <div>
        <h1 tw="text-white text-4xl md:text-4xl lg:text-6xl font-bold">
          Pokedex
        </h1>
      </div>
      <div tw="flex flex-col text-white">
        {signupModalBool === true ? (
          <ModalSignup
            fromState={location.state && location.state.from}
            signupModalBool={signupModalBool}
            setSignupModalBool={setSignupModalBool}
          />
        ) : loginModalBool === true ? (
          <ModalLogin 
            fromState={location.state && location.state.from}
            loginModalBool={loginModalBool}
            setLoginModalBool={setLoginModalBool}
          />
        ) : (
          <div>
            <ButtonBase onClick={() => setLoginModalBool(!loginModalBool)}>
              log in
            </ButtonBase>
            <ButtonBase onClick={() => setSignupModalBool(!signupModalBool)}>
              sign up
            </ButtonBase>
          </div>
        )}
      </div>

      <div></div>
    </div>
  )
}

export default Landing

发布您可以在发送登录操作后使用此值

const ModalLogin = props => {
  const { loginModalBool, setLoginModalBool } = props
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const dispatch = useDispatch()
  const history = useHistory();
  const attemptLogin = e => {
    e.preventDefault()
    dispatch(
      login({
        username: username,
        password: password,
      })
    )
    history.push(props.fromState || '/home');
  }
  ...
}