我有这个PrivateRoute组件（来自文档）：
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
我想更改isAuthenticated为 aysnc 请求isAuthenticated()。但是，在响应返回之前页面重定向。
为了澄清，该isAuthenticated功能已经设置。
在决定显示什么之前，如何等待异步调用完成？
如果您不使用 Redux 或任何其他类型的状态管理模式，您可以使用Redirect组件和组件状态来确定页面是否应呈现。这将包括将状态设置为加载状态，进行异步调用，在请求完成后保存用户，或者缺少用户来声明和呈现Redirect组件，如果不满足条件，组件将重定向。
class PrivateRoute extends React.Component {
state = {
loading: true,
isAuthenticated: false,
}
componentDidMount() {
asyncCall().then((isAuthenticated) => {
this.setState({
loading: false,
isAuthenticated,
});
});
}
render() {
const { component: Component, ...rest } = this.props;
if (this.state.loading) {
return <div>LOADING</div>;
} else {
return (
<Route {...rest} render={props => (
<div>
{!this.state.isAuthenticated && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />}
<Component {...this.props} />
</div>
)}
/>
)
}
}
}
如果有人对使用钩子而不是类组件的@CraigMyles 实现感兴趣：
export const PrivateRoute = (props) => {
const [loading, setLoading] = useState(true);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const { component: Component, ...rest } = props;
useEffect(() => {
const fetchData = async () => {
const result = await asynCall();
setIsAuthenticated(result);
setLoading(false);
};
fetchData();
}, []);
return (
<Route
{...rest}
render={() =>
isAuthenticated ? (
<Component {...props} />
) : loading ? (
<div>LOADING...</div>
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location },
}}
/>
)
}
/>
);
};
使用以下方法调用时效果很好：
<PrivateRoute path="/routeA" component={ComponentA} />
<PrivateRoute path="/routeB" component={ComponentB} />
@pizza-r0b 的解决方案对我来说非常有效。但是，我不得不稍微修改解决方案，以防止加载 div 被多次显示（对于应用程序中定义的每个 PrivateRoute 一次），通过在 Route 内部而不是外部渲染加载 div（类似于React Router 的 auth 示例） ：
class PrivateRoute extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
isAuthenticated: false
}
}
componentDidMount() {
asyncCall().then((isAuthenticated) => {
this.setState({
loading: false,
isAuthenticated
})
})
}
render() {
const { component: Component, ...rest } = this.props
return (
<Route
{...rest}
render={props =>
this.state.isAuthenticated ? (
<Component {...props} />
) : (
this.state.loading ? (
<div>LOADING</div>
) : (
<Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />
)
)
}
/>
)
}
}
为了完整起见，从我的 App.js 中摘录：
<DashboardLayout>
<PrivateRoute exact path="/status" component={Status} />
<PrivateRoute exact path="/account" component={Account} />
</DashboardLayout>