import { useRouter } from 'next/router'
import React, { useState, useEffect } from 'react'

const Main = () => {
  
  const router = useRouter();
  
  const [items, setItems] = useState([]);

  useEffect(() => {
    if (!router.isReady) return;
    
    setItems(() => router.query.text.split('/'));
  }, [router.isReady])
  
  return (
    <ul>
      {items.map(item => (
        <li>{item}</li>
      ))}
    </ul>
  )
}

export default Main