I'm trying to understand why when refreshing the page, the component is called multiple times:
MainLayout.tsx: (routes component)
import { FC, ReactElement, useEffect } from 'react'
import { Routes, Route, BrowserRouter } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import { useLocation } from 'react-router-dom'
import { Navigate } from 'react-router-dom'
import { Outlet } from 'react-router-dom'
import { IntroductionPage } from '../pages/introduction/introduction-page'
import { useTranslation } from 'react-i18next'
import { storage } from '../utils/storage'
export const history = createBrowserHistory()
export const MainLayout: FC = () => {
const { t } = useTranslation()
useEffect(() => {
console.log('MainLayout:: constructor')
}, [])
const RequireAuth = (): ReactElement => {
const { token } = storage.getState().authReducer
let location = useLocation()
if (!token) return <Navigate to="/login" state={{ from: location }} />
return <Outlet />
}
return (
<BrowserRouter history={history}>
<div className="main-wrapper">
<div className="content-wrapper">
<div className="main-content">
<Routes>
<Route path="/" element={<Login />} />
<Route path="/login" element={<Login />} />
<Route element={<RequireAuth />}>
<Route path="/acceptance" element={<AcceptancePage />} />
<Route path="/introduction/:page" element={<IntroductionPage />} />
</Route>
</Routes>
</div>
</div>
</div>
</BrowserRouter>
)
}
introduction page
I put the following code in introduction page:
useEffect(() => {
console.log('IntroductionPage:: constructor')
setIntroduction(introductions[+page - 1])
}, [])
I'm refreshing the introduction page, and see in the console:
IntroductionPage:: constructor
MainLayout.tsx:23 MainLayout:: constructor
IntroductionPage:: constructor
IntroductionPage:: constructor
Appreciate any help
Ah, I see why the IntroductionPage component is mounted twice. The RequireAuth component is declared inside another React component. Since it is redeclared each render cycle it's a new React component reference so React unmounts the instance from the previous render cycle and mounts a new instance. All children it renders will also be new instances.
It should be declared out on its own, outside of any other React component.
Example:
const RequireAuth = (): ReactElement => {
const { token } = storage.getState().authReducer;
const location = useLocation();
if (!token) return <Navigate to="/login" state={{ from: location }} />;
return <Outlet />;
};
export const MainLayout: FC = () => {
const { t } = useTranslation();
useEffect(() => {
console.log('MainLayout:: constructor');
}, []);
return (
<BrowserRouter history={history}>
<div className="main-wrapper">
<div className="content-wrapper">
<div className="main-content">
<Routes>
<Route path="/" element={<Login />} />
<Route path="/login" element={<Login />} />
<Route element={<RequireAuth />}>
<Route path="/acceptance" element={<AcceptancePage />} />
<Route path="/introduction/:page" element={<IntroductionPage />} />
</Route>
</Routes>
</div>
</div>
</div>
</BrowserRouter>
);
};