不应该时反应路由器重定向答案

【问题标题】：React Router Redirecting when not supposed to不应该时反应路由器重定向
【发布时间】：2021-09-29 07:32:24
【问题描述】：

我通过这样做来保护App.js 组件中的一些路由：

<Route path="/backoffice/utilizadores">
 {role && (role === ADMIN || role === MOD) ? (
    <BackOfficeUsers />
   ) : (
    <Redirect to="/backoffice" />
   )}
</Route>

如果我通过单击导航栏的Link 之一进行导航，但当我键入地址时它会重定向我，即使role 是管理员也是如此。
role 来自 redux 存储，这是在我的 App.js 组件函数声明的开头声明的：

const role = useSelector((state) => state.auth.role);

我认为这可能与角色未定义或 "" 在加载 Route 时有关，但我不确定，我正在寻找一些见解和可能的解决方案。

【问题讨论】：

标签： reactjs react-redux react-router react-router-dom

【解决方案1】：

请试试这个。

AdminRoute.jsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

const AdminRoute = ({component: Component, ...rest}) => {
    const role = useSelector((state) => state.auth.role);
    // or const role = localstorage.getItem('role');

    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            (role && (role === 'ADMIN' || role === 'MOD')) ?
                <Component {...props} />
            : <Redirect to="/backoffice" />
        )} />
    );
};

export default AdminRoute;

<AdminRoute path="/backoffice/utilizadores" component={BackOfficeUsers} />

【讨论】：

谢谢，但这不起作用。它不断将我重定向到/backoffice 页面。
我认为您必须在登录时将角色保存到本地存储。然后再试一次。
或者我想像这样再试一次role === 'ADMIN' || role === 'MOD'我认为 ADMIN & MOD 是字符串值
是的，我将它们声明为 const，它们就是那些确切的字符串 :) 不幸的是它仍然不起作用。

【解决方案2】：

这是一个客户端路由问题，所以基本上发生的情况是，当您访问网站上除索引页面之外的某个页面时，获取您的用户/角色的 javascript 未执行。有几种方法可以解决这个问题，最简单的方法是使用哈希路由器。哈希路由器创建的 url 不是以 # 为前缀的索引页面，并且在索引页面代码未执行之前它不会读取后面的任何内容

编辑：或者，您可以查看这个问题，它解释得比我想象的要好得多，希望对您有所帮助

React-router urls don't work when refreshing or writing manually

【讨论】：

感谢您的解释 :) 但哈希路由器目前并不是一个真正的选择。
嘿，检查我链接的问题，希望对您有所帮助，我知道路由真的很烦人，相信我:)

【解决方案3】：

我通过在App.js 中声明我的路线解决了这个问题，如下所示：

<Route path="/backoffice/utilizadores">
 <BackOfficeUsers />
</Route>

并在我的导航栏组件上执行此操作：

const history = useHistory();
const role = useSelector((state) => state.auth.role);

useEffect(() => {
  if (
   history.location.pathname.includes("/backoffice/") &&
   (role !== "ADMIN" || role !== "MOD")
  ) {
    history.replace("/home");
  }
}, [history.location.pathname, role]);

我仍然不完全了解发生了什么以及为什么我之前的解决方案无法正常工作。

【讨论】：