をレンダリングしていないリアクト:は、ルータが、私は次のようにルータ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にリダイレクトされます。しかし、奇妙なことに、私はブラウザからリフレッシュを押すまでレンダリングされません(空白のページ)。
デバッグ方法や問題の可能性があるものが、オンラインで見つかったほとんどの例と同様の方法であるため、よく分かりません。
'LoginPage'コンポーネントはマウントされていますか? (ブレークポイントを固定するか、 'componentDidMount()'メソッドにメッセージを記録する) –
ルータはそれをマウントする責任を負いませんか? –
react-reduxを使用していますか? – Tomasz