React Router Redirecting when not supposed to

Question

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

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

如果我通过单击导航栏的某个Link进行导航，它会正常工作，但当我键入地址时，它会重定向我，即使role是ADMIN
role来自redux存储，这是在我的App.js组件函数声明的开头声明的：

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

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

Answer 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} />

Answer 2

这是一个客户端路由问题，所以基本上，当你转到网站上除了索引页面之外的某个页面时，你的javascript不会执行，它会获取你的用户/角色。有几种方法可以解决这个问题，最简单的方法是使用哈希路由器。哈希路由器创建的URL不是以#为前缀的索引页，在索引页代码还没有执行之前，它不会读取后面的内容

编辑：或者你可以看看这个问题，它比我解释得更好，所以希望它能帮助

React路由器urlsdon'；刷新或手动写入时无法工作

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

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