Devahoy Logo
PublishedAt

•

React

ทำ Routing ให้กับ React ด้วย React Router v4

ทำ Routing ให้กับ React ด้วย React Router v4

#React #React.js #React Router #React Router v4 #SPA #Web

สวัสดีครับ สำหรับบทความนี้เป็นภาคต่อจาก มาเริ่มต้นเขียน React ด้วย Create React App กันดีกว่า ละกัน ว่าด้วยเรื่องการทำ Routing ด้วยการใช้ React Router กัน เพื่อเอามาทำเว็บไซต์ที่มีหลายๆหน้า การ render แต่ละหน้า การ navigate ไปหน้าอื่นๆ นั้นทำยังไงบ้าง ซึ่งเนื้อหาทั้งหมด ก็ตามด้านล่างเลย

Table of Contents

Step 1 : Getting Started

เริ่มต้นสร้างโปรเจ็ค React ด้วย create-react-app ได้เลย

1
npx create-react-app basic-web-react-router
2


3
cd basic-web-react-router
4
yarn

สำหรับบทความพื้นฐาน React สามารถอ่านเพิ่มเติมได้ที่ : มาเริ่มต้นเขียน React ด้วย Create React App กันดีกว่า

เมื่อได้โปรเจ็ค React มาแล้ว ต่อมาผมจะทำการ Format Code เป็น Standard Style (คือลบพวก comma) จาก Project ที่สร้างจาก create-react-app สำหรับใครที่ไม่ต้องการ format อยากได้แบบเดิม ก็ข้ามขั้นตอนนี้ได้เลยครับ ไป Step 2 : Basic Router

1. เพิ่มไฟล์ .eslintrc

1
{
2
  "extends": ["react-app", "standard"],
3
  "rules": {
4
    "space-before-function-paren": 0
5
  }
6
}

2. ทำการเพิ่ม dependencies ต่างๆ

Terminal window
yarn add prettier standard eslint eslint-config-react-app eslint-config-standard eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

3. Add script

ทำการเพิ่ม scripts ไปที่ไฟล์ package.json เพื่อเวลาสั่งรัน prettier จะให้มันทำการ format code โดยไม่ใช้ semicolon และ string แบบ single quote

1
scripts: {
2
  "prettier": "./node_modules/.bin/prettier --semi=false --single-quote=true --write src/*.js"
3
}

4. Run prettier

รันคำสั่ง Prettier ด้วย

1
yarn prettier

Step 2 : Basic Router

ขึ้นตอนต่อมา ทำการติดตั้ง React Router กันเลย

1
yarn add react-router-dom

จากนั้นเปิดไฟล์ src/index.js จากโค๊ดด้านล่าง

1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import './index.css'
4
import App from './App'
5
import registerServiceWorker from './registerServiceWorker'
6


7
ReactDOM.render(<App />, document.getElementById('root'))
8
registerServiceWorker()

ทำการแก้ไขโค๊ดเป็นแบบนี้

1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import './index.css'
4
import App from './App'
5
import registerServiceWorker from './registerServiceWorker'
6
import { BrowserRouter } from 'react-router-dom'
7


8
const AppWithRouter = () => (
9
  <BrowserRouter>
10
    <App />
11
  </BrowserRouter>
12
)
13


14
ReactDOM.render(<AppWithRouter />, document.getElementById('root'))
15
registerServiceWorker()

จากโค๊ด จะเห็นว่าเรามีการเพิ่ม BrowserRouter จาก react-router-dom และทำการใส่ไว้ On Top ของ Component ทำการหุ้ม Component App เราอีกชั้นนึงก่อนที่จะทำการ render

  • ควรใช้ BrowserRouter : ถ้าเรามี Server เอาไว้ serve พวก url
  • ควรใช้HashRouter : ถ้า Server เราเป็นแบบ serve static file เฉยๆ

สังเกตตอนนี้ Web เราก็ยังรันได้ปกติ อาจจะต้องมี stop แล้ว yarn start อีกครั้ง เพราะว่ามันอาจจะมองไม่เห็น react-router-dom ที่เพิ่งติดตั้งลงไป

Hello React

Step 3 : Route & Switch

มาถึงขั้นตอนการทำ Route นะครับ ตอนนี้ผมจะใส่ Bulma เข้ามา เพราะว่าเป็น Stylesheet ที่จะใช้ในบทความนี้ ที่ไฟล์ public/index.html เพิ่ม Bulma และ Font เข้าไป

1
<link
2
  rel="stylesheet"
3
  href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"
4
/>
5
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,700" rel="stylesheet" />

เพิ่มไฟล์ src/index.scss

1
body {
2
  margin: 0;
3
  padding: 0;
4
  font-family: 'Quicksand', sans-serif;
5
}
6


7
.App {
8
  display: flex;
9
  flex-direction: column;
10
  justify-content: center;
11
  align-items: center;
12
}

ต่อมาที่ไฟล์ src/App.js ทำการแก้ไขไฟล์เป็นแบบนี้

1
import React, { Component } from 'react'
2
import { Route } from 'react-router-dom'
3


4
const Home = () => <h1>Home</h1>
5
const About = () => <h1>About</h1>
6
const Post = () => <h1>Post</h1>
7
const Project = () => <h1>Project</h1>
8


9
class App extends Component {
10
  render() {
11
    return (
12
      <div className="App container">
13
        <Route path="/" component={Home} />
14
        <Route path="/about" component={About} />
15
        <Route path="/posts" component={Post} />
16
        <Route path="/projects" component={Project} />
17
      </div>
18
    )
19
  }
20
}
21


22
export default App

อธิบายเพิ่มเติม

1
const Home = () => <h1>Home</h1>
  • เป็นการสร้าง Component ที่ชื่อ Home ทำการ render คำว่า Home นั่นเอง
1
const About = () => <h1>About</h1>
  • สร้าง Component ชื่อ About และก็เหมือนกันกับ Post และ Project

และส่วน

1
<Route path="/projects" component={Project} />
  • path : เป็นการบอกว่า ถ้า URL มี path = /project จะให้มัน render component ชื่อ Project

ทีนี้เราลองเข้าเว็บใหม่ ทีนี้ลองเข้าผ่าน URL http://localhost:3000/posts หรือ http://localhost:3000/about

React Router

Route

อยากที่บ้านบนอธิบายไปแล้ว ตัว Route ถือเป็นส่วนนึงที่สำคัญของ React Router เลยก็ว่าได้ เป็นส่วนที่เราจะเอาไว้กำหนดว่า URL location ที่เราเข้ามาผ่านทาง Browser นั้นตรงกันกับที่เราประกาศไว้ใน Route หรือไม่ ถ้าตรง ก็จะทำการ render ตัว Component ที่เราได้ทำการกำหนดไว้

ซึ่งนอกจาก props path หรือ component แล้ว ตัว Route ก็ยังมี props ที่สำคัญอีก อันนึงคือ exact

ซึ่งจากด้านบน จะเห็นว่า เวลาเราเข้า /project หรือว่า /about จะเห็นคำว่า Project และ About เวลาเข้าหน้าของมัน แต่ก็ดันมีคำว่า Home โผล่มาด้วย นั่นก็เพราะว่า <Route path="/"> นั้นมัน match ทั้ง 2 path ครับ (คือมี / ใน url ไม่สนว่าต่อท้ายเป็นอะไร มัน match อะ)

วิธีการแก้ไขคือ ปรับเป็นแบบนี้

1
<Route exact path="/" component={Home} />

เป็นการบอกว่า ทีนี้ ต้อง match แบบว่า http://localhost:3000/ ยย่างเดียวนะ ถึงจะ render Home ถ้ามี เช่น /projects ถือว่ามันไม่ match ลองดูผลลัพะ์ที่หน้าเราอีกที

React Router

Switch

ต่อมา Switch ตัวนี้จริงๆ ทำงานคล้ายๆ Route แต่ต่างกันที่ถ้าเป็น Switch เมื่อมัน match กับ location ไหนแล้ว มันก็จะ render ตัวนั้นไปเลย ตัวอื่นๆ จะไม่สน โดยไล่จากบนลงล่าง เช่น

1
import { Switch } from 'react-router-dom'
2


3
render() {
4
  <Switch>
5
    <Route path="/" component={Home} />
6
    <Route path="/about" component={About} />
7
    <Route path="/posts" component={Post} />
8
    <Route path="/projects" component={Project} />
9
  </Switch>
10
}

ซึ่งส่วนใหญ่แล้ว Switch ผมจะใช้เอาไว้ในบล็อก ที่มันต้อง render อย่างน้อย 1 Component เช่น บางทีจะวาง Route ที่เป็น Error 404 เอาไว้ เช่น ถ้าไม่เจอ location อะไรเลย ก็ให้มัน render ตัวนี้ไป เช่น

1
<Switch>
2
  <Route path="/" component={Home} />
3
  <Route path="/about" component={About} />
4
  <Route path="/posts" component={Post} />
5
  <Route component={NotFoundPage} />
6
</Switch>

Step 4 : Navigation

ต่อมาจะเห็นว่าเรากำหนด Route เรียบร้อยแล้ว ทีนี้จะเข้าไปแต่ละหน้า ต้องมานั่งพิมพ์ URL เอาหรอ? ไม่สะดวกแน่นอน ทำไมเราไม่ใช้ <a href="#"> ละ เพื่อจะ link ไปหน้า อื่นๆ

ก็ทำการเพิ่ม <a> กันเลย ที่ไฟล์ src/App.js ผมทำการเพิ่ม Navbar ของ Bulma ลงไปด้วย ก็เลยได้ประมาณนี้

1
import React, { Component } from 'react'
2
import { Route } from 'react-router-dom'
3


4
const Home = () => <h1>Home</h1>
5
const About = () => <h1>About</h1>
6
const Post = () => <h1>Post</h1>
7
const Project = () => <h1>Project</h1>
8


9
class App extends Component {
10
  render() {
11
    return (
12
      <div className="my-app">
13
        <nav className="navbar is-light" role="navigation" aria-label="main navigation">
14
          <div className="container">
15
            <div className="navbar-brand">
16
              <a className="navbar-item" href="https://devahoy.com">
17
                <img
18
                  src="https://devahoy.com/assets/images/devahoy-text-logo.png"
19
                  alt="DEVAHOY LOGO"
20
                  width="112"
21
                  height="28"
22
                />
23
              </a>
24
            </div>
25
            <div className="navbar-menu">
26
              <div className="navbar-end">
27
                <a href="/" className="navbar-item">
28
                  Home
29
                </a>
30
                <a href="/posts" className="navbar-item">
31
                  Posts
32
                </a>
33
                <a href="/projects" className="navbar-item">
34
                  Projects
35
                </a>
36
                <a href="/about" className="navbar-item">
37
                  About
38
                </a>
39
                <a class="navbar-item" href="https://github.com/phonbopit" target="_blank">
40
                  Star on <i className="fab fa-github"></i>
41
                </a>
42
              </div>
43
            </div>
44
          </div>
45
        </nav>
46
        <div className="App container">
47
          <Route exact path="/" component={Home} />
48
          <Route path="/about" component={About} />
49
          <Route path="/post" component={Post} />
50
          <Route path="/project" component={Project} />
51
        </div>
52
      </div>
53
    )
54
  }
55
}
56


57
export default App

ทีนี้เวลาเรากด Link บน Navbar ก็จะ เปลี่ยนหน้า และ match location ที่เราต้องการได้

React Router

แต่!!

จะเห็นว่าทุกๆครั้งที่เรากด Link มันจะทำการ refresh หน้าใหม่ทุกครั้งเลย ไม่ใช่ตาม concept SPA ที่จะ route โดยไม่ต้อง refresh วิธีแก้ก็คือการใช้ Link ครับ

ตัว Link จะเป็นเหมือนกับ <a> เพียงแต่ว่าจะเป็นของ React Router และเปลี่ยนจาก href เป็น to แทน เช่น

1
<Link to="/projects">Projects</Link>

เราลองมาเปลี่ยน <a href=""> ทั้งหมด เป็น Link ก็จะได้เป็นแบบนี้

1
<div className="navbar-end">
2
  <Link to="/" className="navbar-item">
3
    Home
4
  </Link>
5
  <Link to="/posts" className="navbar-item">
6
    Posts
7
  </Link>
8
  <Link to="/projects" className="navbar-item">
9
    Projects
10
  </Link>
11
  <Link to="/about" className="navbar-item">
12
    About
13
  </Link>
14
  <a className="navbar-item" href="https://github.com/phonbopit" target="_blank">
15
    Star on <i className="fab fa-github"></i>
16
  </a>
17
</div>

ลองทำการกดใหม่ ทีนี้หน้าเราจะไม่ Refresh แล้ว เป็นอันเรียบร้อย

ต่อมา NavLink ตัวนี้จริงๆก็เหมือนกับ Link เลย เพียงแต่ว่ามันสามารถกำหนด active style, active class ให้กับ Link ได้ เช่น ถ้ามัน location match กัน ก็จะให้มันเป็น class is-active อะไรอย่างงี้

ตอนนี้ตัว Bulma มันจะมี helper class ที่เอาไว้ highlight กรณีที่ active ก็คือคลาส is-active ผมก็เลยใส่ กรณีถ้า match location เลยได้เป็นแบบนี้

1
<div className="navbar-end">
2
  <NavLink exact to="/" activeClassName="is-active" className="navbar-item">
3
    Home
4
  </NavLink>
5
  <NavLink to="/posts" activeClassName="is-active" className="navbar-item">
6
    Posts
7
  </NavLink>
8
  <NavLink to="/projects" activeClassName="is-active" className="navbar-item">
9
    Projects
10
  </NavLink>
11
  <NavLink to="/about" activeClassName="is-active" className="navbar-item">
12
    About
13
  </NavLink>
14
  <a className="navbar-item" href="https://github.com/phonbopit" target="_blank">
15
    Star on <i className="fab fa-github"></i>
16
  </a>
17
</div>

Note: <NavLink /> หรือ <Link /> เราสามารถใส่ exact ได้แบบเดียวกับ <Route />

React Router step 4

สุดท้าย ผมทำการย้ายพวก Component ที่ประกาศไว้ใน src/App.js ไปแยกไว้แต่หน้าไฟล์ ได้เป็น

  • src/pages/About/index.js
  • src/pages/Project/index.js
  • src/pages/Home/index.js
  • src/pages/Post/index.js

และก็ได้เพิ่มเนื้อหาใส่ไปเล่นๆ ให้หน้าแต่ละหน้าดูมีอะไรนิดหน่อย สุดท้ายก็ได้เว็บเรียบๆง่ายๆ แบบนี้ครับ

React Router Final

Conclusion

สรุปบทความนี้ก็เป็นตัวอย่างการใช้งาน React Router แบบง่ายๆ ยังไม่ได้ประยุกต์อะไรที่มันซับซ้อนมากนัก ลองนำไปใช้กันดูครับ ซึ่งก็ลองไปดูการทำ Route แบบ Authentication หรือว่าการ nested routing กันดู

สุดท้าย Source Code ของบทความนี้ครับ

Reference
Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts

Fetch Data ใน React.js ทำยังไงบ้าง?

React

Fetch Data ใน React.js ทำยังไงบ้าง?

PublishedAt
มาใช้ Zustand ร่วมกับ React + TypeScript กันดีกว่า

React

มาใช้ Zustand ร่วมกับ React + TypeScript กันดีกว่า

PublishedAt
เขียน Unit Test ด้วย React + TypeScript + Vitest

React

เขียน Unit Test ด้วย React + TypeScript + Vitest

PublishedAt