Web to native #4

Root.js

import React, {useEffect} from 'react'
import {Link, useLocation} from 'react-router-dom'
import postMessage from './utils/postMessage.js'

const Root = () => {
  const location = useLocation();
  
  useEffect(() => {
    const data = {
      eventName: 'routeChange',
      router: location,
      location: window.location,
    };
    postMessage(data);
  }, [location]);
  
  /* 
    Logo abaixo faço uma regra para adicionar uma classe dependendo do pathname.
    Irei abordar mais abaixo no artigo o motivo mas é somente um exemplo.
  */
  
  const classNameByPath = location.pathname === '/' ? 'home' : 'about'
  
  return (
    <div className={classNameByPath}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />
    </div>
  )
}

export default Root