# Todo-List By React (三) router and decoration (暫完)
[Todo-List By React (一) 增加 todo](https://hackmd.io/@AlbusFu/rkjlmMDWj)
[Todo-List By React (二) sort important](https://hackmd.io/9l5glQL5Sey2i16Qw9RcBA)
**[Todo-List By React (三) router and decoration](https://hackmd.io/Cf0LAxJUQRiybV-eh6ucWw)**

參考[前端修練精神時光屋 2018 - 第一週 - todolist](https://hexschool.github.io/THE_F2E_Design/todolist/)的版型，可以點進去看看設計稿

要用到 router 的部分有 Nav 元件和 TodoList 元件，所以把它們放到 HashRouter 裡面；順便放上三個不同的路徑

// src/index.jsx
<HashRouter>
    <Nav />
    <Add/>
    <Routes>
        <Route path='/' element={<TaskList>}/>
        <Route path='inprogress' element={<TaskList>}/>
        <Route path='completed' element={<TaskList>}/>
    </Routes>
</HashRouter>

Nav元件，放三個連結到各個路徑

const navNames = ['My Task', 'In Progress', 'Completed']
const url = ['/', 'inprogress', 'completed']

retrun {navNames.map((navName, index) => {
    <Link to={url[index]>
        {navName}
    </Link>}
})}

功能大概告一段落，接下來上樣式讓它像樣一點

比較值得說的是，三個連結我用一個 hook 把他們綁定一起，點擊的時候會連動，useButtons 大概長這樣

// src/hooks/useButtons
const useButtons = (buttonNames, defaultName) => {
    const initWhoActive = buttonNames.map(name => name === defaultName)
    
    const [whoActive, setState] = useState(initWhoActive)
    
    function setWhoActive(activeName){
        const newWhoActive = buttonNames.map(name => name === activeName)
        
        setState(newWhoActive)
    }
    
    return {whoActive, setWhoActive}
}

時間因素沒有裝修完，本來要再專個 icon 什麼的，暫時這個專案會先放著，因為下一個想用的專案，要去學資料庫，這個專案暫時先這樣，之後不確定會不會回來弄

[GitHub version-1 程式碼](https://github.com/GeminiFu/todo-list-2)

[GitHub最新進度](https://geminifu.github.io/todo-list-2/dist/index.html)
<iframe src="https://geminifu.github.io/todo-list-2/dist/index.html" width="650px" height="600px"></iframe>

參考範本：
[前端修練精神時光屋 2018 - 第一週 - todolist](https://challenge.thef2e.com/news/1)