Javascript 将历史推送数据作为参数响应到页面
我有一个Ionic React应用程序,Javascript 将历史推送数据作为参数响应到页面,javascript,reactjs,ionic-framework,react-router,Javascript,Reactjs,Ionic Framework,React Router,我有一个Ionic React应用程序,history.replace用于在用户单击注销按钮时将用户从设置页面重定向到登录屏幕。我希望能够在重定向中传递loggedOut标志。然后在登录页面上,我可以检查是否设置了loggedOut标志,并显示“You is loggeout”(您已注销)消息 这是带有注销按钮的设置页面代码 import React from 'react'; import { useHistory } from "react-router"; interface PageP
history.replace
用于在用户单击注销按钮时将用户从设置页面重定向到登录屏幕。我希望能够在重定向中传递loggedOut
标志。然后在登录页面上,我可以检查是否设置了loggedOut
标志,并显示“You is loggeout”(您已注销)消息
这是带有注销按钮的设置页面代码
import React from 'react';
import { useHistory } from "react-router";
interface PageProps {
pageName: string | undefined;
}
const SettingsTab: React.FC<PageProps> = ({ pageName }) => {
console.log("render TabPage " + pageName);
const history = useHistory();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>{pageName}</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton
onClick={async () => {
await logOut();
history.replace("/login");
//history.replace("/login", {loggedOut : "yes"});
}}
>
LOGOUT
</IonButton>
</IonContent>
</IonPage>
);
};
从“React”导入React;
从“react router”导入{useHistory};
界面页面道具{
pageName:字符串|未定义;
}
const SettingsTab:React.FC=({pageName})=>{
log(“呈现TabPage”+pageName);
const history=useHistory();
返回(
{pageName}
{
等待注销();
历史记录。替换(“/login”);
//replace(“/login”,{loggedOut:“yes”});
}}
>
注销
);
};
登录页面:
import React from "react";
import { RouteComponentProps } from "react-router";
const Login: React.FC<RouteComponentProps> = ({ history }) => {
// Check if loggedOut is set so we can display "You are logged out" message
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Login Page {""}</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton
onClick={async () => {
await logIn();
history.replace("/dashboard");
}}
>
LOGIN
</IonButton>
</IonContent>
</IonPage>
);
};
从“React”导入React;
从“react router”导入{RouteComponentProps};
常量登录:React.FC=({history})=>{
//检查是否设置了loggedOut,以便显示“您已注销”消息
返回(
登录页{“”}
{
等待登录();
历史记录。替换(“/仪表板”);
}}
>
登录
);
};
我仍然是React的新用户,因此非常感谢您对此问题提供的任何帮助或建议。您可以使用
localStorage
来存储和验证用户的身份验证状态,例如:
{
等待登录();
setItem(“isLoggedIn”,true);
历史记录。替换(“/仪表板”);
}}
>
登录
;
然后:
您可以像这样在传递状态(标志)时导航到登录页面
history.replace("/login", {loggedOut : true});
然后在登录组件中,您可以访问如下状态值:
已编辑
import React from "react";
import { withRouter } from "react-router";
// A simple component that shows the pathname of the current location
class Login extends React.Component {
render() {
const { match, location, history } = this.props;
const isLoggedOut = location.state && location.state.loggedOut
return (
<div>
<div>You are now at {location.pathname}</div>
{isLoggedOut ? <p>You have loggedout</p> : ''}
</div>;
)
}
}
export default withRouter(Login);
从“React”导入React;
从“react router”导入{withRouter};
//显示当前位置路径名的简单组件
类登录扩展了React.Component{
render(){
const{match,location,history}=this.props;
const isLoggedOut=location.state&&location.state.loggedOut
返回(
您现在位于{location.pathname}
{isLoggedOut?你有loggedout:''}
;
)
}
}
使用路由器导出默认值(登录);
如何修改登录页面代码以支持此操作?我在“history.location.state.loggedOut”行中得到一个“Object可能为'null'或'undefined'”。@StephenGlass您可以使用withRouter访问组件中的历史对象。在这里看到更多:如果这个或任何答案已经解决了你的问题,请考虑点击复选标记。这向更广泛的社区表明,你已经找到了一个解决方案,并给回答者和你自己带来了一些声誉。没有义务这样做。
import React from "react";
import { withRouter } from "react-router";
// A simple component that shows the pathname of the current location
class Login extends React.Component {
render() {
const { match, location, history } = this.props;
const isLoggedOut = location.state && location.state.loggedOut
return (
<div>
<div>You are now at {location.pathname}</div>
{isLoggedOut ? <p>You have loggedout</p> : ''}
</div>;
)
}
}
export default withRouter(Login);