reactjs - React Router 重定向到登录页面但不渲染登录组件

Question

我正在使用 React Router v4 进行非常基本的身份验证工作流程，如下所示:

const AuthenticatedRoute = ({ component: Component, ...rest }) => (  
  <Route {...rest} render={props => (
    sessionStorage.getItem('jwt') ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: "/login",
        state: { from: props.location }
      }} />
    )
  )}/>
)

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
          <AuthenticatedRoute exact path="/" component={App}  />
          <Route path="/login" component={LoginPage} />
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

该流程运行完美，当没有“jwt”时，应用程序将重定向到/login。然而，奇怪的是，直到我从浏览器中按刷新后，它才被渲染(即空白页面)。

不确定如何调试和/或可能出现什么问题，因为这与网上找到的大多数示例类似。

Answer 1

我猜你使用了react-redux，这是一个常见问题。 (如果没有我会删除答案)

在react-redux connect中使用{pure: false}或使用withRouter HOC。

React router 4 does not update view on link, but does on refresh