이 글은 22일째이다.
다음은 주의사항.

Riot.js Advent Calendar 2019는 riot

로 불린다

Riot.js는 route

로 불린다

본 보도의route는v5.2.0(執筆時点の最新)※ v5와 관련해서는 별도의 글을 쓰고 있습니다

onBeforeRoute 이벤트 프로세서 생성

루트의 원본 코드를 보면 두 개의 riot 구성 요소를 발견할 수 있습니다. 그중@riotjs/route을 보세요.
router-hoc.rit의 발췌문

onBeforeRoute(path, pathToRegexp) {
  if (!match(path, this.state.pathToRegexp)) {
    this.update({
      route: null
    })
  }
},

기쁜 이름을 정의하는 방법 w 그리고 route-hoc.riot 중,
index.js

// 省略
import Route from './components/route-hoc.riot'
import Router from './components/router-hoc.riot'
// 省略
export {
  // 〜
  Router,
  Route
}

응응🤔잘 모르겠어요. 확실히 쓰고 있어요.그럼 이걸로 onBeforeRoute 할게요.

메일 병합 처리 추가

이번 공식 퍼레이드 하나index.js를 빌렸다.<router>, <route> 등의 레이블이 아닌 JS 라우팅 기반입니다.
standalone-history.}(변경 전)

<nav>
  <a href="/hello">Hello</a>
  <a href="/user">User</a>
  <a href="/user/gianluca">Username</a>
  <a href="/goodbye">goodbye</a>
</nav>
<div id="root"></div>
<script type="module">
  const { initDomListeners, setBase } = route

  const loc = window.location

  setBase(`${loc.protocol}//${loc.host}`)

  const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`

  route.route('/hello').on.value(onRoute)
  route.route('/user').on.value(onRoute)
  route.route('/user/:username').on.value(onRoute)
  route.route('/goodbye').on.value(onRoute)

  initDomListeners()
</script>

nav에는 링크의 간단한 SPA만 표시되며, 클릭하면 해당 텍스트가 아래div 탭에 표시됩니다.
그럼 여기에 onBeforeRoute 방법을 추가합니다.
standalone-history.}(변경 후)

  <nav>
    <a href="/hello">Hello</a>
    <a href="/user">User</a>
    <a href="/user/gianluca">Username</a>
    <a href="/goodbye">goodbye</a>
  </nav>
  <div id="root"></div>
  <script type="module">
    const { initDomListeners, setBase } = route

    const loc = window.location

    setBase(`${loc.protocol}//${loc.host}`)

    const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+   const onBeforeRoute = () => {
+     // 現在のルーティングパスを取得し表示
+     alert(route.getCurrentRoute())
+   }

+   route.route('/hello').on.value(onBeforeRoute)
    route.route('/hello').on.value(onRoute)
    route.route('/user').on.value(onRoute)
    route.route('/user/:username').on.value(onRoute)
    route.route('/goodbye').on.value(onRoute)

    initDomListeners()
  </script>

그럼 실행해 봅시다.
standalone-history.html
링크Username를 누르면div 탭/user/gianluca에 텍스트가 표시됩니다.여기서 링크를 클릭하면 ↑를 포착할 수 있습니다.
alert에 표시된 문자는 Hello로 실행/hello의 루트 자체이지만 문자가 아직 고쳐지지 않아 차단되었다.

끝말

결국 이것은 간단한 방법일 뿐이다. 사실 나는 이렇게 해서는 안 된다고 생각한다. 즉, 방금 처리된 것을 아래처럼 다시 쓰면 Hello의 경보가 먼저 표시된다는 것이다.
발췌하다

-    const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+    const onRoute = (url) => {
+      root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+      alert("onRoute!!")
+    }
   const onBeforeRoute = () => {
     // 現在のルーティングパスを取得し表示
     alert(route.getCurrentRoute())
   }

-   route.route('/hello').on.value(onBeforeRoute)
    route.route('/hello').on.value(onRoute)
+   route.route('/hello').on.value(onBeforeRoute)

이 설명을 조금 더 자세히 하자면route 내부에는 의 프로그램 라이브러리rawth를 사용하고rawth 내부에는 1의 프로그램 라이브러리에 의존하고 있다.
그럼 이 아이가 배열관리onRoute!!로 측정한 루트는 순서대로 집행되기 때문에 먼저 표시.on된다.따라서 onRoute!!에 설정된 순서를 먼저 써야 합니다.
사실 올바른 사용법이 있다고 생각하지만 이렇게 움직이니까 또 뭐가 있는지 알면 업데이트하고 싶어요.
그럼 안녕히 계세요.ω゜)ノ

참고 자료

erre

Riot.jsv4 지원 로터

Riot.jsv4를 지원하는 Router 2

엄밀히 말하면route의 핵심 기능은 거의 모두 이 아이의 기능이다Riot.자체 제작 로터