如何在三元运算符上导航react页面

Question

在向/admin发送道具时，如果LoggedIn和admin为true，我将尝试导航到管理页面，但这不起作用。你能帮忙吗？

export default function Auth() {

function login(e) {
e.preventDefault();
const data = { email, password };
axios
.post("http://localhost:3001/api/Login", data, { withCredentials: true })
.then((response) => {

if(!!response.data.loggedIn && !!response.data.admin){ return( <Navigate to="/admin"  loggedIn={"response.data.loggedIn"} replace/> )}
else if(!!response.data.loggedIn && ! !!response.data.admin){ window.location.href = "https://www.dummyweb.com/webmail";}
else{return(alert("Username or Password is not valid!"))}  
});

}
return (
<div>
<LogginForm/>
</div>
)
}

Answer 1

若要有条件地呈现内容或重定向，则应使用以下命令：

react-router-dom

由于您正在尝试使用useNavigate挂钩，我假设您正在使用react-router-domv6，并将从那里开始。

版本6

在react-router-domv6中去除了Redirect成分。使用Navigate组件并指定replace道具来执行重定向，而不是常规导航。

export default function Admin(props) {
return props.isLoggedIn ? (
<div>
<Row className={stylesadmin.root}> 
<Uploader/>
<ToastContainer/>  
</Row>
</div>
) : (
<Navigate to="/Auth" replace />
);
}

版本5

使用CCD_ 8组件重定向到"/Auth"；。

export default function Admin(props) {
return props.isLoggedIn ? (
<div>
<Row className={stylesadmin.root}> 
<Uploader/>
<ToastContainer/>  
</Row>
</div>
) : (
<Redirect to="/Auth" />
);
}

更新

使用命令式导航/重定向。

导入useNavigate(v6(/useHistory(v5(挂钩并发出命令重定向。

export default function Auth() {
const navigate = useNavigate();  // v6
// const history = useHistory(); // v5
function login(e) {
e.preventDefault();
const data = { email, password };
axios
.post("http://localhost:3001/api/Login", data, { withCredentials: true })
.then((response) => {
if (!!response.data.loggedIn && !!response.data.admin) {
navigate(
"/admin",
{
replace: true,
state: { loggedIn: response.data.loggedIn },
}
);
// history.replace(
//   "/admin",
//   {
//     loggedIn: response.data.loggedIn,
//   }
// );
} else if (!!response.data.loggedIn && ! !!response.data.admin) {
window.location.href = "https://www.dummyweb.com/webmail";
} else {
alert("Username or Password is not valid!");
}  
});
}
return (
<div>
<LogginForm/>
</div>
);
}

Answer 2

您可以使用react路由器重定向组件

return <>{props.isLoggedIn ?  (<div>
<Row className={stylesadmin.root}> 
<Uploader/>
<ToastContainer/>  
</Row>
</div>) : <Redirect to='/Auth'/> }</>
}

Answer 3

您可以使用Redirect组件或使用react-router-dom中的useHistory挂钩

Answer 4

import { useNavigate } from 'react-router-dom';
export default function Auth() {
let navigate = useNavigate();
function login(e) {
e.preventDefault();
const data = { email, password };
axios
.post("http://localhost:3001/api/Login", data, { withCredentials: true })
.then((response) => {

if(!!response.data.loggedIn && !!response.data.admin){ return(  navigate( "/admin" , { state:{loggedIn:response.data.loggedIn}} )}
else if(!!response.data.loggedIn && ! !!response.data.admin){ window.location.href = "https://www.dummyweb.com/webmail";}
else{return(alert("Username or Password is not valid!"))}  
});

}
return (
<div>
<LogginForm/>
</div>
)
}

在管理页面上，我按照以下处理它

export default function Admin() {
const {state} = useLocation();
const { loggedIn} = state;
return(
loggedIn?
(<whatever/>):(<whatever2/>)
)
}

这是完美的