Reactのコンポーネントの読み込みはいつ行われるのか？
解決したいこと
React-Router-domを使用したルーティングを実装したアプリを作成しました。
そこで、ログイン後に表示できるページを実装したかったので、PrivateRouteとして、isAuthという認証を行う関数を使用し、認証されていればPrivate.jsを表示、そうでなければホームにリダイレクトするルートを追加しました。
Private.jsではSocketContext、VideoAppをロードするようにしました。
私の考えではこのPrivate.js内のコンポーネントが読み込まれてコードが実行されるのは、PrivateルートでisAuthの認証を通った時だと思っていたのですが、どうやらホームにアクセスした時点でコードが実行されているようです。
（SocketContext内で行なっているWebSocketのコネクションがホームにアクセスした時に起こっているので判明しました。）
なぜこのタイミングで実行されるのかが分かりません。
この場合、どのような処理をすればPrivate.js内のコンポーネントの読み込みを認証後に行うようにできるんでしょうか？
該当するソースコード
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
ReactDOM.render(<Routes />, document.getElementById('root'));
Routes.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from './App';
import Signup from './auth/Signup';
import Signin from './auth/Signin';
import Private from './core/Private';
import PrivateRoute from './auth/PrivateRoute';
const Routes = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={App} />
<Route path="/signup" exact component={Signup} />
<Route path="/signin" exact component={Signin} />
<PrivateRoute path="/private" exact component={Private} />
</Switch>
</BrowserRouter>
);
};
export default Routes;
PrivateRoute.js
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
//ユーザー認証 trueならPrivateルートに入ることができる
import { isAuth } from './helpers';
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
isAuth() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/signin',
state: { from: props.location }
}}
/>
)
}
></Route>
);
export default PrivateRoute;
Private.js
import React from 'react';
import Layout from './Layout';
import VideoApp from './VideoApp';
//WebSocketの接続、react contextの設定など
import { SocketContext } from './SocketContext';
const Private = () => {
return (
<Layout>
<SocketContext>
<VideoApp />
</SocketContext>
</Layout>
);
}
export default Private;
0 likes
