function Index(){
    useEffect(()=>{
        console.log('userEffect=>來了老弟')
        return ()=>{
            //解綁副作用，但是隻要狀態變化，就會觸發解綁
            console.log('老弟走了啊？Index')
        }
    },[])//只有數組裡的引數狀態改變時才執行，等於空的話，只有銷燬時才執行
    return <h2>Jarsmine</h2>
}

useEffect的第二個引數相當於類元件的生命週期銷燬函式

import {BrowserRouter,Route,Link} from 'react-router-dom';
import React,{useState, useEffect} from 'react';
function Index(){
    useEffect(()=>{
        console.log('userEffect=>來了老弟')
        return ()=>{
            //解綁副作用，但是隻要狀態變化，就會觸發解綁
            console.log('老弟走了啊？Index')
        }
    },[])
 
//只有數組裡的引數狀態改變時才執行，等於空的話，只有銷燬時才執行
    return <h2>Jarsmine</h2>
}
function List(){
    useEffect(()=>{
        console.log('userEffect=>好嗨哦')
    })
    return <h2>List Page</h2>
}

  
 export default function RouterDome(){
    const [count,setCount]=useState(0)//陣列解構
    useEffect(()=>{
        console.log(`useEffect
 
=>You clicked ${count}times`)
        return()=>{
            console.log(`===============`)//解綁
        }
      },[count])//加空陣列：銷燬時才解綁,加count，count變化時解綁，
      //轉頁時不會出現解綁
  return (
    <div>
    <p>You clicked {count} times</p>
    <button onClick={()=>{setCount(count+1)}}>click me</button>
    <BrowserRouter>
        <ul>
            <li><Link to="/">首頁</Link></li>
            <li><Link to="/list">列表 </Link></li>
        </ul>
        <Route path="/" exact component={Index}></Route>
        <Route path="/list/" exact component={List}></Route>
    </BrowserRouter>
  </div>
  )
   }