Reactjs 基于ajax请求的重定向组件渲染

我有一个主路径“/”，每当用户进入该路径时，如果他通过身份验证，我想将他发送到他的页面，如果他没有通过身份验证，我想将他发送到“/login”路径。为了将用户发送到他的页面，我向服务器发出请求，获取他的id并根据我从服务器获得的id将他重定向到路由。然而，对于如何在我的主组件中正确实现该逻辑，我有点困惑。根据ajax请求的结果呈现重定向组件的最佳方式是什么

class Home extends React.Component {

    async componentDidMount() {
        const response = await Api.getUserId();
        const id = response.data._id;
    }  

    render() {
        if(this.props.userStatus.authenticated) {
            return <Redirect to={{
                pathname: `/${id}`,
                state: { from: this.props.location }
            }}/>
        }
        return <Redirect to={{
            pathname: '/login',
            state: { from: this.props.location }
        }}/>
    }
}

export default connectComponent(['userStatus'], Home);

class Home扩展了React.Component{
异步组件didmount（）{
const response=await Api.getUserId（）；
const id=response.data.\u id；
}  
render（）{
if（this.props.userStatus.authenticated）{
返回
}
返回
}
}
导出默认的connectComponent（['userStatus']，主页）；

您可以执行以下操作： 创建名为PrivateRoute的新组件：

import React from 'react'
import { Redirect, withRouter, Route } from 'react-router-dom'
import { isLogin } from '../actions/actions_rents'
import { connect } from 'react-redux'

const PrivateRoute = ({ component: Component, ...rest }) => {
    return(
        <Route {...rest} render={props => (
        isAuthenticated ? (
        <Component />
        ) : (
        <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }}/>
      )
    )}/>
  )
}

从“React”导入React
从“react router dom”导入{Redirect，withRouter，Route}
从“../actions/actions\u”导入{isLogin}
从“react redux”导入{connect}
const privaterout=（{component:component，…rest}）=>{
返回(
(
我被认证了(
) : (
)
)}/>
)
}

然后在你的App.js中或者在你有路由的地方，你调用PrivateRoute并将组件作为道具传递回家，在这种情况下：

<Switch>
  <Route path="/login" component={Login}/>
  <PrivateRoute path="/" component={IndexRents} />
</Switch>

此外，我建议您查看以下示例：

fetch（'//offline news api.herokuapp.com/stories'）
.然后（功能（响应）{
控制台日志（响应）；
const login=response.ok；
类条目扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
(
登录(
) : (
)
)}/>
);
}
}
ReactDOM.render（，document.getElementById（'root'））；
})
.然后（功能（故事）{
});

谢谢，但这不是我的问题所在。Home组件的思想是，它通过我从服务器检索的ID将经过身份验证的用户重定向到各自的页面。我希望发生的事情：用户转到“/”=>如果他通过身份验证，我从服务器获取他的id（通过提供令牌），然后将他重定向到他的个人页面。我所困惑的是如何实现“获取用户id，然后根据获取的id重定向”异步逻辑。我要将用户重定向到的路由基于我从服务器获得的结果。您可以在得到结果后定义类。

 fetch('//offline-news-api.herokuapp.com/stories')
.then(function (response) {
    console.log(response);
    const login = response.ok;
    class Entry extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <Router>
                    <Switch>
                        <Route exact path="/login" component={Login}/>
                        <Route path="/" render={() => (
                          login ? (
                              <Common/>
                          ) : (
                            <Redirect to="/login"/>
                          )
                        )}/>
                    </Switch>
                </Router>
            );
        }
    }

    ReactDOM.render(<Entry/>, document.getElementById('root'));

})
.then(function (stories) {
});