Svelte 라우팅 설정

가장 유명한 2가지 라이르러리중 하나를 골라 사용하면 된다. 

 

1. svelte-spa-router

2. svelte-routing

 

작성일 기준 라이브러리 버전 관리가 1번은 10달전이 최근이고 2번은 10일 전이 최근이기 때문에 2번으로 선택해서 진행했다. 

공식문서만 봐도 잘 이해가 잘 되게 해놨지만 방법을 정리해보면

 

 

npm i -D svelte-routing

 

 

설치해준 뒤

 

<script>
  import { Router, Link, Route } from "svelte-routing";
  import MyPage from "./pages/mypage/MyPage.svelte";
  import CPAAdManage from "./pages/cpa/CPAAdManage.svelte";

  export let url = "";


</script>

<main>
  <Router {url}>
      <Route path="/" component={MyPage} />
      <Route path="/CPA" component={CPAAdManage} />
  </Router>
</main>

 

App.svelte 다.

 

React에서 Router 사용하듯이 경로와 컴포넌트 설정 해주면 된다. 

 

지금 공식문서에 가보면 

 

 

이런식으로 정의 되어 있는데

 

<Link> 컴포넌트를 사용하면서 스타일이 안 먹어서 class 명을 붙여주고 다시 스타일을 정의해줘도 먹지 않았다. 

 

<script>
    import {Link, link} from "svelte-routing";
</script>

<div class="header-menu">
    <div class="hamburger-icon" on:click={toggleSidebar}>
        <i class="fa-solid fa-bars hamburger-icon"></i>
    </div>
    <div class="flex-box">
        <Link to="/" class="white-text">마이페이지</Link>   // 얘 작동안됨
        <a href="/"  class="white-text" use:link >마이페이지</a>  // 얘 잘 됨
        <div class="small-box bordered">LOGOUT</div>
    </div>
</div>

<style>
    .white-text{
        color: white;
        text-decoration: none;
    }
</style>

 

확실히 svelte 생태계가 아직 활성화 되지 않았다고 느낀게 이런류에 대한 레퍼런스가 별로 없었다. 

 

 

use:link는 스벨트에서 라우팅 기능을 활용하기 위한 지시자 라고 하는데 그렇다고만 인지하고 넘어가도 상관없을것 같다.