React-router v4：条件表达式未正确执行答案

【问题标题】：React-router v4: Conditional expression not executing correctlyReact-router v4：条件表达式未正确执行
【发布时间】：2017-06-13 19:11:57
【问题描述】：

操作系统：Windows 10 专业版
反应路由器：4.1.1
反应：15.5.4

所以，我在 <Route /> 中进行条件检查以确定 authToken 是否存在，如果它不重定向用户登录，否则呈现关联的组件。但即使令牌存在，如图所示，如果您重新加载 root / 或 /view/:postId 的页面，用户仍会被重定向到登录页面。

我在这里忽略了什么？

app.js

  render () {
    const SOME_PATH = window.location.pathname;

    return (
      <ApolloProvider store={store} client={client}>
        <Router history={history}>
          <Route path={SOME_PATH} component={App}/>
        </Router>
      </ApolloProvider>
    )
  }

App.js

export default compose(
  allPostsCommentsQuery,
  connect(mapStateToProps, mapDispatchToProps)
)(Main);

Main.js

  render () {
    const auth = this.props.auth.token;
    console.log('auth = ', auth);
    return (
      <div>
        <h1>
          <Link to="/">Flamingo City</Link>
        </h1>
        <Switch>
          <Route path={`${this.props.match.url}`} exact render={(props) => (
            !auth ? <Redirect to="/login"/> : <PhotoGrid {...this.props} {...props} />
          )} />
          <Route path={`${this.props.match.url}view/:postId`} render={(props) => (
            !auth ? <Redirect to="/login"/> : <Single {...this.props} {...props} />
          )} />
          <Route path={`${this.props.match.url}login`} render={(props) => (
            <LoginUser {...this.props} {...props} />
          )} />
        </Switch>
      </div>
    );
  }

【问题讨论】：

我有同样的问题

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

如下重构代码解决了这个问题：

!auth ? (<Redirect to="/login"/>) : (<PhotoGrid {...this.props} {...props} />)

【讨论】：