3.2 Xây dựng hằng số paths (ok)

C:\Users\Administrator\Desktop\start\src\constants\paths.tsx

export const PATH = {
	HOME: '/',
	ABOUT: '/about',
	PRODUCT: '/product'
}

C:\Users\Administrator\Desktop\start\src\components\SideNav\index.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import home from './../../assets/images/home.svg'
import list from './../../assets/images/list.svg'
import {PATH} from './../../constants/paths';
function SideNav() {
	return (
		<nav className="navi close">
			<h3 className="text-center w-100 mt-3">
        <a href="https://xdevclass.com/" target="_blank" rel="noopener noreferrer" className="text-white d-block">Visit website X</a>
      </h3>
      <ul className="list-unstyled mb-5">
      	<li>
          <NavLink exact to={PATH.HOME}> <img src={home} alt="" /> <span>Home</span></NavLink>
        </li>
        <li>
          <NavLink to={PATH.PRODUCT}><img src={list} alt="" /><span>Product</span></NavLink>
        </li>
      </ul>
		</nav>
	)
}
export default SideNav;

Last updated

Was this helpful?