---
tags: React
---

# React Router todo-app

**gitlab專案連結** : [[React Router todo-app]](http://192.168.1.136/robin98727/React-router-todo-app)

完整畫面[圖片點此](http://i.imgur.com/wPOyjuk.png)

## 1. 目錄架構
在components新增Filter.jsx

Redux-Saga-todo-app
|_____ src
     |_____actions
     |     |_____index.js
     |_____components
     |     |_____App.jsx
     |     |_____Filter.jsx
     |_____containers
     |     |_____App.jsx
     |_____lib
     |     |_____api.js
     |_____reducers
     |     |_____clearapi.js
     |     |_____getapi.js
     |     |_____index.js
     |     |_____postapi.js
     |     |_____putapi.js
     |_____sagas
     |     |_____index.js
     |_____store
     |     |_____index.js

## 2.程式流程

## 3.功能實作

### reducers/index.js

export default (history) => combineReducers({
    //新增這段
    router: connectRouter(history),
    ...
})

### components/App.jsx

import Filter from './Filter'
import { Route } from 'react-router'
import { ConnectedRouter } from 'connected-react-router'
import { history } from "../store"

//計算目前list內有幾個
count() {
    let count = 0;
    this.props.finishs.forEach(item => {
        if (item != true)
            count++
    })
    return count;
}


changeDone(e, d, i) {
        //傳入index
        const check = this.props.finishs[i]
        this.props.fetchPutDataRequest(d, i, check)
}

render() {
    return(
    ...
        <ConnectedRouter history={history}>
            <Route path="/" render={() => <Filter data = {(this.props.names)} 
                                                  finish = {(this.props.finishs)} 
                                                  changeDone = {this.changeDone} 
                                                  count = {this.count} />} />
        </ConnectedRouter >
    ...
    )
}
                

### components/Filter.jsx
根據網址的改變，來Link到要顯示的列表

import React, { Component } from 'react'
import { Route, Link, Switch } from 'react-router-dom'


class Filter extends Component {
    constructor(props) {
        super(props)
        this.Active = this.Active.bind(this)
        this.All = this.All.bind(this)
        this.Completed = this.Completed.bind(this)
    }


    //為了回傳列表中所有未勾選的選項
    isShow(done) {
        return (
            done === false
        )
    }

    //為了回傳列表中所有已勾選的選項
    isShow_Complete(done) {
        return (
            done === true
        )
    }

    //顯示所有的列表
    All() {
        return (
            <ul>
                {this.props.data.map((d, i) => {
                    return <li key={i}>
                        <input type="checkbox" onChange={(e) => this.props.changeDone(e, d, i)} checked={this.props.finish[i]} />
                        <span>{d}</span>
                    </li>
                })}
            </ul>
        )
    }

    //顯示未勾選的列表
    Active() {
        return (
            <ul>
                {this.props.data.map((d, i) => {
                    return this.isShow(this.props.finish[i]) && <li key={i}>
                        <input type="checkbox" onChange={(e) => this.props.changeDone(e, d, i)} checked={this.props.finish[i]} />
                        <span>{d}</span>
                    </li>
                })}
            </ul>

        )
    }
    
    //顯示以勾選的列表
    Completed() {
        return (
            <ul>
                {this.props.data.map((d, i) => {
                    return this.isShow_Complete(this.props.finish[i]) && <li key={i}>
                        <input type="checkbox" onChange={(e) => this.props.changeDone(e, d, i)} checked={this.props.finish[i]} />
                        <span>{d}</span>
                    </li>
                })}
            </ul>
        )
    }

    render() {
        return (
            <nav>
                //若路徑相同則會對應到各自的function
                <Route path="/All" component={this.All} />
                <Route path="/Active" component={this.Active} />
                <Route path="/Completed" component={this.Completed} />
                
                <div>{this.props.count()} items left</div>

                //會連結到網址localhost:888/All or...
                <Link to='All' >
                    <span>All</span> |
                </Link>
                <Link to='Active'>
                    <span>Active</span> |
                </Link>
                <Link to='Completed'>
                    <span>Completed</span>
                </Link>
            </nav>
        )
    }
}

export default Filter

## 4.功能展示
### 點選All後的畫面以及網址

### 點選Active後的畫面以及網址

### 點選Completed後畫面以及網址

### **PS: 如果用直接輸入網址的也會導到以上畫面**