해결됨: History React Router v6 앱 사용

History React Router v6 사용과 관련된 주요 문제는 해시 기반 라우팅을 지원하지 않는다는 것입니다. 이는 모든 URL이 절대 경로여야 하므로 애플리케이션을 관리하고 유지하기 어렵게 만들 수 있음을 의미합니다. 또한 동적 경로에 대한 기본 제공 지원이 없으므로 여러 페이지가 있는 복잡한 애플리케이션을 만들 때 문제가 될 수 있습니다. 마지막으로 History React Router v6는 경우에 따라 필요할 수 있는 서버 측 렌더링에 대한 지원을 제공하지 않습니다.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// 이 코드는 react-router-dom 라이브러리에서 BrowserRouter, Switch, Route 및 useHistory 구성 요소를 가져옵니다.
// 그런 다음 기록 객체를 생성하기 위해 useHistory 후크를 사용하는 App이라는 함수를 생성합니다.
// 이 기록 개체는 호출될 때 기록 스택에 새 항목을 푸시하는 handleClick이라는 함수에서 사용됩니다.
// App 함수는 클릭 시 handleClick을 호출하는 onClick 핸들러가 있는 버튼을 포함하는 일부 JSX를 반환합니다.
// 마지막으로 경로가 "/new-location"과 일치할 때 NewLocation 구성 요소를 렌더링하는 Route 구성 요소가 내부에 있는 Switch 구성 요소가 있습니다.

사용 기록이란 무엇입니까

useHistory는 프로그래밍 방식으로 탐색하기 위해 구성 요소가 기록 개체에 액세스할 수 있도록 하는 React Router에서 제공하는 React Hook입니다. 새 위치를 기록 스택에 푸시하고, 현재 위치를 교체하고, 기록을 앞뒤로 이동하는 등의 작업에 사용할 수 있습니다.

반응에서 경로 기록을 얻는 방법

React Router에서는 useHistory 후크를 사용하여 경로 기록을 얻을 수 있습니다. 이 후크는 탐색, 앱 기록 앞뒤 이동 등에 사용할 수 있는 기록 인스턴스에 대한 액세스를 제공합니다. 이를 사용하려면 React Router에서 후크를 가져온 다음 구성 요소에서 호출하기만 하면 됩니다.

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
const 히스토리 = useHistory();

// 이제 `history` 개체를 통해 경로 기록에 액세스할 수 있습니다.

반품 (…);
}

반응 라우터는 기록 API를 사용합니까?

예, React Router는 HTML5 History API를 사용하여 현재 위치와 해당 기록을 추적합니다. 이를 통해 React Router는 페이지를 다시 로드하지 않고도 페이지를 업데이트할 수 있으므로 탐색이 더 빠르고 원활해집니다. History API는 또한 딥 링크를 허용하여 사용자가 애플리케이션의 특정 페이지로 바로 연결되는 링크를 더 쉽게 공유할 수 있도록 합니다.