Svelte에서 라우터를 만드는 방법

몇 줄의 코드로 불필요한 패키지를 피할 수 있습니다.

Unsplash에 Javier Allegue Barros의 사진

예를 들어 단일 페이지 응용 프로그램에서 JavaScript 프레임 워크 (우리가 사랑하는 Svelte)를 사용할 때 사용자가 필요에 따라 웹 사이트 섹션 사이를 이동할 수있는 방법을 제공해야합니다.

SPA에서는 모든 웹 페이지 요청이 루트 페이지로 리디렉션되기 때문에 페이지를 탐색하는 "표준"방법을 시뮬레이션해야합니다. 이것이 라우팅 라이브러리가 우리에게 도움이되는 곳이며, 재현하기 복잡한 작업처럼 보이지만 기본 기능은 매우 간단하며 몇 줄의 코드로 수행 할 수 있습니다.

기사의 끝에서 우리는 다음 프로젝트에 우리 자신의 라우터를 사용할 수 있습니다.

커스텀 라우터를 구현하는 이유

  • 현재 라우터 패키지의 모든 기능이 필요하지는 않습니다. SPA의 번들 크기는 고려해야 할 가장 중요한 사항 중 하나입니다. 성능은 사용자가 필요한 스크립트를 다운로드하는 데 걸리는 시간에 정비례하기 때문입니다.
  • 필요에 따라 라우터 기능을 사용자 지정할 수 있습니다. 페이지간에 전환을 추가하거나 페이지가 변경 될 때 함수를 트리거하고 싶을 수도 있습니다. 코드를 제어 할 수 있으며 독단적 인 규칙을 작성하고 있습니다.
  • 새로운 Javascript 기술을 배울 수 있습니다. 예를 들어이 기사에서는 브라우저의 기록과 상호 작용하는 기본 API 인 HTML5 History API를 사용합니다 . 가능성이 얼마나 많은지 놀랄 것입니다.

우리가 가장 좋아하는 라우터가 어떻게 작동하는지 배우기 시작합시다. 예를 들어, svelte-routing npm 패키지를 보겠습니다 .

<Router {url}>
    <Route path="blog/:id" component={Post}/>
    <Route path="blog" component={Blog}/>
    <Route path="about" component={About}/>
    <Route path="/" component={Home} />
</Router>
<script>
  import {Router, Route} from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";
  import Post from "./routes/Post.svelte";
export let url = "";
</script>

이를 위해 라우터는 현재 window.location 을 읽고 동일한 패턴과 일치하는 경로를 선언 된 경로에서 검색합니다. 따라서 라우터는 올바른 구성 요소를 렌더링합니다.

우리가 구축 할 커스텀 라우터의 예

이 기사에서는 이러한 방식으로 사용할 수있는 라우터 구성 요소를 빌드합니다.

<Router {routes}/>
<script>
  import Router from "@/components/Router.svelte";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";
  import Post from "./routes/Post.svelte";
const routes = {
    "blog/:id": () => Post,
    "blog": () => Blog,
    "about": () => About,
    "/": () => Home
  };
</script>

이제 시작하겠습니다. 새 구성 요소를 만들고 이름을 Router.svelte 라고합니다 . 여기에서 선택한 페이지를 렌더링하고 올바른 경로를 검색해야합니다.

기본 라우팅

다음 경로가 있다고 상상해보십시오.

  • / 블로그
  • /약
  • / user / posts
  • /

<svelte:component this={component}/>

let component;
export let routes = {};

const LoadRoute = path => {
  component = routes[path]();
};

onMount(() => {
  LoadRoute(location.pathname);
});

window.onpopstate = () => LoadRoute(location.pathname);

<svelte:component this={component}/>
<script>
  import {onMount} from "svelte";
  let component;
  export let routes = {};
  onMount(() => {
    LoadRoute(location.pathname);
  });
</script>
<script context="module">
  const LoadRoute = path => {
    component = routes[path]();
  };
window.onpopstate = () => LoadRoute(location.pathname);
</script>

웹 사이트 내부를 탐색하려면 다시로드하지 않고도 페이지를 변경할 수 있도록 프로젝트 전체에서 사용할 기능을 구현해야합니다.

코드에 다음을 추가하십시오.

<script context="module">
  // previous code
export const navigate = path => {
    window.history.pushState(null, null, path);
    LoadRoute(path);
  };
</script>

<button on:click={() => navigate("/about")}>
  About
</button>

우리가 라우터에서 찾을 또 다른 일반적인 것은 매개 변수와 경로,하자 우리가 응답시에있는 블로그 게시물이 있다고 가정 / 블로그 / 내 포스트 내 포스트가 동적됩니다. 이 경우 라우터는 동적 조각이있는 경로에서도 검색해야합니다.

예를 들어 다음 경로를 경로에 추가 할 수 있습니다.

  • / blog / : id

사용 가능한 모든 경로를 세그먼트 ( getRouteSegments 함수) 로 분할 한 다음 각 세그먼트를 현재 경로 ( getRoute ) 와 비교해야합니다 .

분명히 현재 경로의 모든 변수를 props ( getProps 함수) 로 추출해야합니다 .

<script context =”module”>에 다음 코드를 추가합니다.

let _routes = {};
const getRouteSegments = routes =>
  Object.entries(routes).map(([path, component]) => ({
    path,
    component,
    segments: path
      .replace(/^\/+|\/+$/g, '')
      .split('/')
      .map(segment => ({
        name: segment.replace(':', ''),
        variable: segment.startsWith(':')
      }))
  }));
const getRoute = path => {
  const segments = path.replace(/^\/+|\/+$/g, '').split('/');
return _routes.find(route => {
    if(route.segments.length !== segments.length) return false;
return segments.every((s, i) =>
      route.segments[i].name === s ||
      route.segments[i].variable
    );
  });
};
const getProps = (path, routeSegments) => {
  let props = {};
const segments = path.replace(/^\/+|\/+$/g, '').split('/');
  segments.map((s, i) =>
    routeSegments[i].variable &&
    (props[routeSegments[i].name] = s)
  );
return props;
};

let props = {};

onMount(() => {
  _routes = getRouteSegments(routes);
  LoadRoute(location.pathname);
});

const LoadRoute = async(path) => {
  const current = getRoute(path);
component = (await current.component()).default;
  props = getProps(path, current.segments);
};

<svelte:component this={component} {...props}/>

<svelte:component this={component} {...props}/>
<script>
  import {onMount} from "svelte";
  let component;
  export let routes = {};
  onMount(() => {
    _routes = getRouteSegments(routes);
    LoadRoute(location.pathname);
  });
</script>
<script context="module">
  let _routes = {};
  let props = {};
  const LoadRoute = async(path) => {
    const current = getRoute(path);
component = (await current.component()).default;
    props = getProps(path, current.segments);
  };
  const getRouteSegments = routes =>
    Object.entries(routes).map(([path, component]) => ({
      path,
      component,
      segments: path
        .replace(/^\/+|\/+$/g, '')
        .split('/')
        .map(segment => ({
          name: segment.replace(':', ''),
          variable: segment.startsWith(':')
        }))
    }));
  const getRoute = path => {
    const segments = path.replace(/^\/+|\/+$/g, '').split('/');
    return _routes.find(route => {
      if(route.segments.length !== segments.length) return false;
      return segments.every((s, i) =>
        route.segments[i].name === s ||
        route.segments[i].variable
      );
    });
  };
  const getProps = (path, routeSegments) => {
    let props = {};
    const segments = path.replace(/^\/+|\/+$/g, '').split('/');
    segments.map((s, i) =>
      routeSegments[i].variable &&
      (props[routeSegments[i].name] = s)
    );
    return props;
  };
  export const navigate = path => {
    window.history.pushState(null, null, path);
    LoadRoute(path);
  };
  window.onpopstate = () => LoadRoute(location.pathname);
</script>

이것은 미디엄에 대한 나의 첫 번째 기사입니다. 다른 많은 기사를 작성하고 도움을 드리고 싶습니다. 나는 웹 개발자로서의 경험과 내가 사용할 새로운 기술에 대해 쓸 것입니다.

문법 오류를하게된다면 미안하지만 영어가 제 모국어가 아닙니다.

내가 당신을 도왔거나 질문이 있으면 저에게 연락하고 다른 팁을 위해 저를 따르십시오. 모두 감사합니다!

내 다른 기사 중 일부는 다음과 같습니다.

JavaScript 프로젝트의 DIY 다국어 페이지 레이아웃을위한 재사용 가능한 Svelte 구성 요소 생성

일반 영어의 JavaScript

이 기사를 즐겼습니까? 그렇다면 YouTube 채널 인 Decoded구독하여 더 많은 유사한 콘텐츠를 얻으십시오 !

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.