[Solid] Solid-Router: 페이지 라우팅 설정하기

Solid-Router는 React Router를 기반으로 한 패키지로,

 

DOM 구조에서 URL 주소를 기반으로 한 페이지 전환을 위해 설계된 패키지입니다.

 

이를 통해 Solid에서 여러 개의 페이지를 가진 DOM 구조를 구현할 수 있습니다.

 

Solid-Router의 컴포넌트들은 아래와 같이 호출할 수 있습니다.

import { A, HashRouter, MemoryRouter, Navigate, Route, Router } from "@solidjs/router";

1. Router & HashRouter

라우팅을 구성하는 최상단 컴포넌트입니다.

 

Route들을 포함하는 wrapper역할을 합니다.

<Router>
	{/* routes */}
</Router>

만약 URL에 해시값이 포함되어 있다면, HashRouter를 사용합니다.

<HashRouter>
	{/* routes */}
</HashRouter>

 

2. Route

각 URI 주소와 대응될 페이지를 지정합니다.

 

페이지는 컴포넌트 형식으로 넘겨주며, 서로 다른 URI 주소가 같은 컴포넌트를 가리킬 수 있습니다.

 

기본 URI 주소는 '/' 입니다.

<Route path="/" component={MainPage} /> {/* 한 개 페이지 */}
<Route path={["/login", "/register"]} component={Login} /> {/* 두 개 이상의 페이지 */}

3. MemoryRouter

브라우저의 페이지 방문 기록을 저장하고자 할 때 사용합니다.

 

<Router>의 경우 브라우저가 이를 기록하며, <HashRouter>의 경우 URL에 해시값으로 기록됩니다.

 

반면 <MemoryRouter>는 createMemoryHistory( ) 메소드를 이용하여 사용자가 직접 저장할 수 있습니다.

export default function App() {
  const history = createMemoryHistory();
  
  // set() : 각 페이지로 이동하면서 history 값을 갱신합니다
  const toHome = () => {
    history.set({ value: "/" });
  };
  
  const toAbout = () => {
    history.set({ value: "/about" });
  };
  
  return (
    <>
      <button onClick={toHome}>{'"/"'}</button>
      <button onClick={toAbout}>{'"/about"'}</button>
      
      {/* 저장된 history값은 MemoryRouter로 넘겨집니다 */}
      <MemoryRouter
        history={history}
        root={(props) => <Suspense>{props.children}</Suspense>}
      >
        {/*... routes */}
      </MemoryRouter>
    </>
  );
}

생성한 history 객체는 다음과 같이 조작할 수 있습니다.

get	현재 경로 저장	forward	앞으로 가기
set	지정한 경로로 이동 후 저장	go	n번 앞으로/뒤로 가
back	뒤로가기	listen	callback 함수 추가

4. A

<a> 태그에 대한 wrapper로 동작합니다. 하이퍼링크로써 <a>와 기능은 같지만, 몇가지 추가 기능이 있습니다.

Base path 제공

<a>는 기본적으로 현재 위치한 url 경로를 root로 하여 경로를 처리합니다.

 

예를 들어 아래와 같은 경우 <a>가 "/home"에 위치해 있다면, 링크는 "/home/link1"을 가리키게 됩니다.

<a href="/link1">link1</a>

여기에 <A>는 추가로 base path로도 경로를 지정할 수 있습니다.

 

Base path는 상위 Router에서 base="/subpath"와 같이 지정할 수 있습니다.

 

이 경우  <A>가 "/home" 위치에 있더라도, 링크는 "/subpath/link1"을 가리키게 됩니다.

<Router base="/subpath">
    <A href="/link1">link1</A>
</Router>

Active Class

<A>는 만약 href의 경로가 현재 경로와 같다면 active class값을, 다르면 inactive class값을 반환합니다.

 

이를 통해 현재 페이지와 일치하는 링크에 스타일을 쉽게 적용할 수 있습니다.

 

하위 경로를 무시하기 때문에, 현재 위치가 "/a/b"이고 href="/a"이어도 class값은 active가 됩니다.

5. Navigate

<A>와 유사한 역할은 합니다. 단, Navigate는 해당 경로에 위치한 컴포넌트가 렌더링되는 즉시 이동합니다.

 

또한 href가 대상 경로를 받지 않고, 대상 경로를 반환하는 함수를 받습니다.

function getPath({ navigate, location }) {
  // navigate : useNavigate()의 반환값을 받을 변수;
  // location : useLocation()의 반환값을 받을 변수.
  return "/some-path";
}

// ...
<Navigate href={getPath} />

 

각 컴포넌트가 지니는 prop과 자세한 설명은 아래 공식 문서에서 확인할 수 있습니다.

https://docs.solidjs.com/solid-router/reference/components/route

Route - SolidDocs