많은 제품을 보여주는 카탈로그 페이지가 있습니다. 사용자가 하단에서 제품 중 하나를 클릭하면 제품 번호가 1000이라고 말하면 다른 페이지로 이동하여 내용을 확인합니다. 뒤로 버튼 사용 브라우저가 카탈로그 페이지로 돌아가면 모든 것이 다시 렌더링됩니다. 이는 의미가 있지만 이전에 선택한 제품에 스크롤 막대를 배치하는 데 많은 시간이 걸립니다.

사용자가 페이지 상단에서 특정 제품(예: 제품 번호 4)을 선택하면 모든 것이 잘 작동하지만, 하단으로 이동하면 시나리오가 시작됩니다.

REACT에서 이 디렉토리 페이지를 캐시할 수 있는 방법이 있나요? 렌더링하는 데 걸리는 시간을 피하려면?

목차 페이지 하단에 페이지 매김을 하면 이 문제가 해결되지만 "더 보기" 버튼이 있습니다. React.memo를 사용해 보았으나 현재 페이지에서 작업을 수행할 때만 작동하고 뒤로 버튼을 사용하여 해당 페이지로 이동할 때는 작동하지 않습니다.

저는 React Router v5를 사용하고 있습니다. 여기에 코드와 함께 몇 가지 codepen을 추가할 수 있지만 먼저 이것이 가능한지 알고 싶습니다. 뒤로 버튼을 눌러 돌아가면 모든 것을 렌더링해야 하고, 정적인 페이지처럼 보이고, 스크롤이 마지막 제품이 선택된 위치로 이동하지도 않는 페이지를 본 적이 있습니다. 어둠 속에 빛이 있을까?

이것은 나의 예입니다.

App.jsx

Home.jsx

Page1.jsx

Page2.jsx

import React, { StrictMode } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import './App.css';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <StrictMode>
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <Link to='/'>home</Link><br />
          <Link to='/page1'>page 1</Link><br />
          <Link to='/page2'>page 2</Link><br />
        </header>
        <Switch>
          <Route path='/page1'>
            <Page1 />
          </Route>
          <Route path='/page2'>
            <Page2 />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
    </StrictMode>
  );
}

export default App;