리액트 라우터에서 라우팅 이벤트를 처리하는 방법은 여러 가지가 있습니다. 가장 일반적으로 사용되는 방법은 Route 컴포넌트를 사용하여 라우팅 경로를 정의하고 해당 경로에 해당하는 컴포넌트를 렌더링하는 것입니다. 이때 라우트 컴포넌트에는 path prop으로 경로를 설정하고, component prop에 해당 경로에 맞는 컴포넌트를 설정합니다.

아래는 Route 컴포넌트를 사용하여 /about 경로에 About 컴포넌트를 렌더링하는 예시입니다.

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

function App() {
  return (
    <div>
      <Route path="/about" component={About} />
    </div>
  );
}

이렇게 설정된 경로에 접근하면, 라우터는 해당 경로에 설정된 컴포넌트를 렌더링합니다.

라우트 이벤트를 처리하기 위해서는 history 객체를 사용할 수 있습니다. history 객체를 사용하면 페이지 전환과 URL 변경을 프로그래밍적으로 제어할 수 있습니다. 예를 들어, 특정 이벤트 발생 시 페이지를 이동하거나 URL을 변경하고 싶다면 history.push() 메서드를 사용할 수 있습니다.

아래는 버튼 클릭 시 /about 경로로 이동하는 예시입니다.

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

function App() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>About 페이지로 이동</button>
    </div>
  );
}

이처럼 리액트 라우터를 사용하여 라우팅 이벤트를 처리할 수 있습니다. 리액트 라우터에 대한 더 자세한 내용은 공식 문서를 참고하시기 바랍니다.

• React Router 공식 문서: https://reactrouter.com/