反应路由器尝试重定向用户的问题

Question

我正在开发一个 MERNG 应用程序，但在注销用户时遇到问题。

所以，我有一条路线，它将带您到 url 具有 /profile/userId 的页面，用户 ID 由 localStorage 给出，因为我从那里获取该值，并且，当我注销时，我删除来自 localStorage 的令牌，因此，如果没有值，它应该带您登录页面。

现在，问题是，当我登录并进入 /profile/userId 页面时，我用 f5 刷新页面，如果我注销，它不会让我这样做，重定向不会工作，它只有在我不刷新页面时才有效，这对我的应用程序来说是一个大问题，而且它实际上很奇怪。

也许是我的代码有问题，我不太清楚如何使用重定向，所以如果你能帮我解决这个问题，你就是最棒的！

这就是代码

带有重定向的路由

import React from "react";
import "./App.css";

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

import Auth from "./website/Auth";
import SocialMedia from "./website/SocialMedia";
import SingleUser from "./website/SingleUser";

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
        <Route exact path="/socialmedia" component={SocialMedia} />
        <Route exact path="/profile/:id" component={SingleUser} />
      </Switch>
    </Router>
  );
}

export default App;

退出

import React from "react";

import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";

const SingleUser = () => {
  const history = useHistory();
  const dispatch = useDispatch();

  const userData = JSON.parse(localStorage.getItem("token"));

  const logout = () => {
    dispatch({ type: "LOGOUT" });
    if (!userData) {
      history.push("/");
    }
  };

  return <div onClick={logout}>Single User</div>;
};

export default SingleUser;

我在 localStorage 中存储令牌并通过注销操作将其删除的减速器

const reducer = (state = { authData: null }, action) => {
  switch (action.type) {
    case "LOGIN":
      localStorage.setItem("token", JSON.stringify({ data: action.payload }));
      return {
        ...state,
        authData: action.payload
      };

    case "LOGOUT":
      localStorage.removeItem("token");
      return {
        ...state,
        authData: null
      };

    default:
      return state;
  }
};

export default reducer;

Answer 1

这仅仅是因为您仅在“/”路由中呈现 Auth 组件。

因此，如果您在不同的路线上，您将跳过“/”路线，并且将显示用户路线。有不同的处理方法：

1. 始终重定向

<Switch>
        <Route exact path="/">
          <Auth />
        </Route>
        {!logIn && <Route path="*"><Redirect to={`/profile/${logIn.data.id}`} /></Route>} // This route will not always be rendered if the user should login and is not on the "/" page
        <Route exact path="/socialmedia" component={SocialMedia} />
        <Route exact path="/profile/:id" component={SingleUser} />
      </Switch>

1. 为每条路线手动重定向

const SingleUser = () => {
  const history = useHistory();
  const dispatch = useDispatch();

  const userData = JSON.parse(localStorage.getItem("token"));
  if(!userData) histroy.push("/")
 ...

1. 早日归来

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));
  if(!login) return <Auth />
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Redirect to={`/profile/${logIn.data.id}`} />
        </Route>
        <Route exact path="/socialmedia" component={SocialMedia} />
        <Route exact path="/profile/:id" component={SingleUser} />
      </Switch>
    </Router>
  );
}

此外，userData 将始终在注销时定义，因为您访问的不是新的 lcoalState，而是当前的 lcoalState，在它被删除之前。它仍然存在于您的变量中。

if (!userData) { // Remove the if
    history.push("/");
}

Answer 2

另一个对您来说非常简单的解决方案可能就是这样做：

<Route exact path="/" render={() => (logIn ? <SingleUser /> : <Auth />)} />

这种方式在每次重新渲染时都会检查是否有用户，如果没有，它会将您直接重定向到 Auth 组件。

Answer 3

你好，过去的麦克！

你的代码没问题，但是，当你点击注销时，App.js 组件上的变量还是一样的，所以，你不会得到你要找的结果，你必须做什么，它是重新加载网站，所以 App.js 组件会上传变量，并会识别变量的值已经改变，所以你将再次登录/注册！

只需为此更改您的代码，到目前为止一切都按预期工作

import React from "react";

import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";

const SingleUser = () => {
  const history = useHistory();
  const dispatch = useDispatch();

  const logout = () => {
    dispatch({ type: "LOGOUT" });

    history.push("/");
    history.go("/");
  };

  return <div onClick={logout}>Single User</div>;
};

export default SingleUser;