Reactjs 此.props.history更新后未设置本地存储

我想我基本上误解了BrowserRouter在React中的工作原理

我尝试在授权成功后使用本地存储来存储OAuth令牌。如果本地存储中没有这样的条目（按预期工作），用户应该在加载时重定向到登录页面，但是在初次登录时（在本例中，通过Google登录），它会再次重定向回登录页面，而不是让我进入请求的页面。如果我在这个阶段刷新，或者输入我试图访问的URL，我将被带到正确的页面

我的基本组件如下所示：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userToken: window.localStorage.getItem('userToken')
        }
    }

    loginRedirect() {
        if(!this.state.userToken) return <Redirect to='/login'/>
    }

    render() {
        return (
            <Router>
                { this.loginRedirect() }
                <Route exact path='/' component={Main}/>
                <Route path='/login' component={Login}/>
            </Router>
        );
    }
}

在登录组件内解析，然后设置localStorage并重定向回根页面：

componentWillMount() {
    const query = QueryString.parse(this.props.location.search);
    if(query.token) {
        window.localStorage.setItem('userToken', query.token);
        this.props.history.push('/');
    }
}

此时，我的基本组件的构造函数将激发，但localStorage中的“userToken”值未设置，因此状态未设置，登录重定向将再次激发

---

如果您能解释一下我做错了什么，我们将不胜感激。

您需要将新令牌设置为state

setUserToken = (token) => {
  this.setState({ userToken: token })
}

并发送到

Login

组件

<Route path='/login' render={() => <Login setUserToken={this.setUserToken} />}/>

if(query.token) {
   window.localStorage.setItem('userToken', query.token);
   this.props.setUserToken(query.token)
   this.props.history.push('/');
}

---

我看到的是，您正在尝试将用户重定向到

http://localhost:3000/login?token=xxx

触发令牌保存过程。但是它被

this.loginDirect（）

截获，到那时

this.state.userToken

仍然是空的。然后它被重定向到

，没有任何参数。谢谢，浩武。尽管如此，我认为查询参数仍然得到保留，因为我可以在auth.Hmmm之后重定向回login之后立即查询本地存储中的令牌，您是否尝试在测试之前清除本地存储？如果不是，则可能是以前存储在存储器中的现有数据造成的。否则可能是因为在

App

的

状态下没有其他地方设置
userToken
。如果您没有硬刷新页面，
应用程序的
构造函数
只运行一次。是的，我每次都清除本地存储以模拟注销。每次刷新后，我都会返回登录页面，这是预期的行为。构造函数在每次重定向时首先运行。在这种情况下，请尝试将
this.props.history.push（'/'）
替换为
window.location.href='/'
谢谢。特别是让我意识到路由器中的“渲染”属性。它仍然不起作用，但我做了一些修改：
componentWillMount（）{const query=QueryString.parse（this.props.location.search）；if（query.token）{window.localStorage.setItem（'userToken'，query.token）；this.props.onSuccess（query.token）；}
和
handleSuccess（token）{this.setState({userToken:token}，（）=>{this.props.history.push（'/'）；}）}
以及在BrowserRouter中包装（withRouter ed）。
if(query.token) {
   window.localStorage.setItem('userToken', query.token);
   this.props.setUserToken(query.token)
   this.props.history.push('/');
}