import React, { memo, useState } from 'react'
import ReactDOM from 'react-dom/client'
import About from './pages/about'
import Home from './pages/home'
import Product from './pages/product'
import { Link, BrowserRouter, Route, Routes } from 'react-router-dom'
const Index = memo(() => {
  const [index, setIndex] = useState(0)
  return (
    <div>
      <h1>hello React112</h1>
      <h2>当前计数:{index}</h2>
      <button
        onClick={() => {
          setIndex(index + 1)
        }}>
        +1
      </button>
      <BrowserRouter>
        <Link to="/about">关于</Link>
        <Link to="/home">首页</Link>
        <Routes>
          <Route path="/about" element={<About />}></Route>
          <Route path="/home" element={<Home />}>
            <Route path="product" element={<Product />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
})

ReactDOM.createRoot(document.getElementById('app')).render(<Index />)