---
tags: react,
disqus: hackmd
---

###### tags: `react-router`

# react-router-example(3)

完成的畫面就像這樣，點擊任一個連結就會切換到相對應的頁面。

這裡附上[我的github](https://github.com/hsiaomingcheng/react-router-example)

接著我整理一下App.js，把Router放到最外層裡面包著路由路徑，然後把一開始的Nav做成元件在各業分別引入。
主要是希望保持App.js的單純。

class App extends Component {
    constructor(props) {
        super(props);
        this.props = props;
    }

    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/about">
                        <About />
                    </Route>
                    <Route path="/news">
                        <News />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>

                <div className="App" />
            </Router>
        );
    }
}

在專案越大越大的情況下，我覺得也可以把Switch給獨立出來，再引入到App.js，這樣也比較方便管理路徑的部分。

最後可以把Route改寫成比較簡短的寫法

<Switch>
    <Route path="/about" component={About} />
    <Route path="/news" component={News} />
    <Route path="/" component={Home} />
</Switch>