Reactjs React路由器专用路由正在访问它不应该访问的路由'；t通道
此应用程序具有登录/注册帐户和GoogleOAuth帐户 我的问题是告诉私有路由不要在googleOauth注销时访问仪表板/编辑配置文件等身份验证路由 例如，这个导航栏正是我想要的，但这个逻辑在私有路由组件中不起作用 这就是逻辑Reactjs React路由器专用路由正在访问它不应该访问的路由'；t通道,reactjs,typescript,Reactjs,Typescript,此应用程序具有登录/注册帐户和GoogleOAuth帐户 我的问题是告诉私有路由不要在googleOauth注销时访问仪表板/编辑配置文件等身份验证路由 例如，这个导航栏正是我想要的，但这个逻辑在私有路由组件中不起作用 这就是逻辑 props.isAuthenticated === true || props.googleAccount != "" 因此，如果isAuthenticated（常规帐户）为true，则显示这些已验证的nav按钮；如果googleAccount已登录，则显示已验证的
props.isAuthenticated === true || props.googleAccount != ""
const user = props.currentUser.user ? props.currentUser.user : "";
const googleId = props.currentUser && props.currentUser.user ? props.currentUser.user.googleId : null;
console.log("router", user);
console.log("dsdsdsds", props.googleAccount);
return props.hasError ? (
<div>Error</div>
) : (
<Router history={history}>
<AppBar position="static">
<Toolbar>
<Grid justify="space-between" container={true}>
<Typography variant="h6" style={{ color: "#fff" }}>
TypeScript React App
</Typography>
<Grid item={true}>
{props.isAuthenticated === true || props.googleAccount != "" ? (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to="/dashboard"
>
Dashboard
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to={{
pathname: `/${user.id}/likes`,
}}
>
Your Likes
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/editProfile"
>
Edit Profile
</Link>
</Button>
<Notification
userId={user.id}
id={id}
handleClose={handleClose}
open={open}
anchorEl={anchorEl}
handleNotificationClick={handleNotificationClick}
title={"Notifications"}
/>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to={{
pathname: `/profile/${user.username}`,
}}
>
Profile
</Link>
</Button>
<Button style={{ color: "#fff" }} onClick={props.logOut}>
Logout
</Button>
</Fragment>
) : (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/register"
>
Sign Up
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/login"
>
Log In
</Link>
</Button>
</Fragment>
)}
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Switch>
<Route exact={true} path="/" component={Landing} {...props} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/emailConfirmation" component={EmailConfirmation} {...props} />
{/* <Route path='/resendEmailConfirmation'></Route> */}
<Route path="/emailConfirmationSuccess/:userId/:token" component={EmailConfirmationSuccess} {...props} />
<PrivateRoute exact={true} path="/profile/:username" component={Profile} {...props} />
<PrivateRoute exact={true} path="/editProfile" component={EditProfile} {...props} />
<PrivateRoute exact={true} path="/:userId/likes" component={Likes} {...props} />
<PrivateRoute exact={true} path="/dashboard" component={Dashboard} {...props} />
<PrivateRoute path="/post/:id" component={Post} {...props} />
<Route component={NotFound} />
</Switch>
</Router>
);
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (rest.isAuthenticated || rest.googleAccount != null ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)} />
);
export default PrivateRoute;
const user=props.currentUser.user？props.currentUser.user:；
const googleId=props.currentUser&&props.currentUser.user？props.currentUser.user.googleId:null；
控制台日志（“路由器”，用户）；
log（“dsds”，props.googleAccount）；
返回props.hasError？(
错误
) : (
打字脚本反应应用程序
{props.isAuthenticated==true | | props.googleAccount！==“”(
家
仪表板
你喜欢的
编辑配置文件
轮廓
注销
) : (
家
注册
登录
)}
{/* */}
);
const user = props.currentUser.user ? props.currentUser.user : "";
const googleId = props.currentUser && props.currentUser.user ? props.currentUser.user.googleId : null;
console.log("router", user);
console.log("dsdsdsds", props.googleAccount);
return props.hasError ? (
<div>Error</div>
) : (
<Router history={history}>
<AppBar position="static">
<Toolbar>
<Grid justify="space-between" container={true}>
<Typography variant="h6" style={{ color: "#fff" }}>
TypeScript React App
</Typography>
<Grid item={true}>
{props.isAuthenticated === true || props.googleAccount != "" ? (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to="/dashboard"
>
Dashboard
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to={{
pathname: `/${user.id}/likes`,
}}
>
Your Likes
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/editProfile"
>
Edit Profile
</Link>
</Button>
<Notification
userId={user.id}
id={id}
handleClose={handleClose}
open={open}
anchorEl={anchorEl}
handleNotificationClick={handleNotificationClick}
title={"Notifications"}
/>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to={{
pathname: `/profile/${user.username}`,
}}
>
Profile
</Link>
</Button>
<Button style={{ color: "#fff" }} onClick={props.logOut}>
Logout
</Button>
</Fragment>
) : (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/register"
>
Sign Up
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/login"
>
Log In
</Link>
</Button>
</Fragment>
)}
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Switch>
<Route exact={true} path="/" component={Landing} {...props} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/emailConfirmation" component={EmailConfirmation} {...props} />
{/* <Route path='/resendEmailConfirmation'></Route> */}
<Route path="/emailConfirmationSuccess/:userId/:token" component={EmailConfirmationSuccess} {...props} />
<PrivateRoute exact={true} path="/profile/:username" component={Profile} {...props} />
<PrivateRoute exact={true} path="/editProfile" component={EditProfile} {...props} />
<PrivateRoute exact={true} path="/:userId/likes" component={Likes} {...props} />
<PrivateRoute exact={true} path="/dashboard" component={Dashboard} {...props} />
<PrivateRoute path="/post/:id" component={Post} {...props} />
<Route component={NotFound} />
</Switch>
</Router>
);
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (rest.isAuthenticated || rest.googleAccount != null ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)} />
);
export default PrivateRoute;
从“React”导入React；
从“react router dom”导入{Redirect，Route}；
const privaterout=（{component:component，…rest}）=>(
（rest.isAuthenticated | | rest.googleAccount！=null？：）}/>
);
导出默认私有路由；
rest.isAuthenticated || rest.googleAccount != null
即使rest.googleAccount为“”（空字符串），此条件也会返回true。因此，我应该怎么做呢？这取决于在项目中如何实现身份验证，如果它在navbar上工作正常，您可以正确使用相同的条件吗？props.isAuthenticated==true | | props.googleAccount！=“”不是（rest.isAuthenticated | | rest.googleAccount！=null），因为props.isAuthenticated==true | | props.googleAccount！=“”可能适合您的实现而不是检查null，检查googleAccount prop的空字符串是的，我已经做了几个小时了，我一直被重定向到登录屏幕，有点不对劲，或者是私有路由没有立即读取rest prop，或者是其他什么。如果我能想出一个解决我的问题的办法，我会接受这个答案。我将把它作为一个答案发布。