2017-09-04 67 views
2

我用阵营路由器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')); 

流程完美的作品,当没有“智威汤逊该应用程序被重定向到/登录。然而,奇怪的是,直到我从浏览器中按下刷新,它才得到渲染(即空白页)。

不知道如何调试和/或什么可能是问题,因为这是一个类似的方法,大多数在线发现的例子。

+1

'LoginPage'组件是否挂载? (在'componentDidMount()'方法中粘贴断点或日志消息) –

+0

路由器不负责安装它吗? –

+0

你使用react-redux吗? – Tomasz

回答