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

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

# react-router-example(1)

[一探究竟了解React-router 4簡易教學](https://www.ucamc.com/e-learning/javascript/278-%E7%B0%A1%E5%96%AE%E4%BB%8B%E7%B4%B9%E4%BA%86%E8%A7%A3react-router-4%E6%95%99%E5%AD%B8)

---

這裡用來記錄，我在實作練習react-router的一些記錄。

[React-router](https://reacttraining.com/react-router/)，一進入就可以看到兩顆很大的按鈕web、native。
因為我們是寫web，所以就選擇web，native是給react-native的。


本篇環境位置：[Github](https://github.com/hsiaomingcheng/react-router-example/tree/feature/200618/add-project/chrishsiao)
因為我不是使用CRA(create-react-app)的方式，所以環境建置的部分我就不多提，你可以依照官網介紹方式用CRA練習，或是下載我的再自己跑起來。

### Quick Start

進到Quick Start頁面後，在畫面的右半邊就可以看到，指令跟程式碼，
再搭配中間的文字解釋。

先安裝：

yarn add react-router-dom

安裝完之後就可以開工啦～

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
} from 'react-router-dom';

class App extends Component {
    render() {
        return (
            <div className="App">
                <Router>
                    <div>
                        <nav>
                            <ul>
                                <li>
                                    <Link to="/">Home</Link>
                                </li>
                                <li>
                                    <Link to="/about">About</Link>
                                </li>
                                <li>
                                    <Link to="/users">Users</Link>
                                </li>
                            </ul>
                        </nav>

                        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
                        <Switch>
                            <Route path="/about">
                                <About />
                            </Route>
                            <Route path="/users">
                                <Users />
                            </Route>
                            <Route path="/">
                                <Home />
                            </Route>
                        </Switch>
                    </div>
                </Router>
            </div>
        );
    }
}

export default App;

function Home() {
    return <h2>About</h2>;
}

function About() {
    return <h2>About</h2>;
}

function Users() {
    return <h2>Users</h2>;
}

接著就可以打開頁面看成果了。

看看程式碼的部分，共引入了BrowserRouter、Switch、Route、Link這四個。

#### BrowserRouter
在引入的時候被改名為Router，被包在結構的外層。

#### Link
作用就像A標籤一樣，實際在看轉出的程式碼也是，看到他被轉成A標籤。

#### Switch
就像是一個切換開關一樣，把所有的Route給包住，包覆著每一個對應的切換內容。

#### Route
簡單說就是你每個頁面的內容。

如果去比較程式碼與轉出的DOM，可以發現除了Link會被轉成a標籤以外，剩下的三個皆不會出現在HTML上。