React Browser Router (Switch, Route, Link)

| React | 1087 | 644 วันที่แล้ว
วันนี้ผมจะลองทำ React Browser Router (Switch, Route, Link) กันครับ ซึ่ง router ที่ผมจะใช้ทดสอบวันนี้มีอยู่ 3 อันด้วยกัน นั่นคือ Switch, Route แล้วก็ Link ครับ

ก่อนอื่นเลย เราก็ไปติดตั้ง package react-router-dom กันก่อนครับ

npm install --save react-router-dom
เมื่อติดตั้งแล้ว ต่อไปเราก็มาเลือก Router กันก่อน ซึ่งก็มีอยู่ 2 แบบนั่นคือ <BrowserRouter> กับ <HashRouter> <BrowserRouter> เอาไว้ใช้สำหรับ handle dynamic requests <HashRouter> เอาไว้สำหรับ static websites แน่นอนว่าที่นิยมใช้กันที่สุดก็คือ BrowserRouter ดังนั้นผมจะเน้นทดสอบไปที่ BrowserRouter ตัวนี้นะครับ ก่อนอื่นเลยเราก็ ครอบ App ของเราด้วย BrowserRouter ครับ ตามตัวอย่างด้านล่าง
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))
จากนั้นมาลองใช้ route กันดูครับ
<Route exact path='/' component={Home}/>
<Route path='/search' component={Search}/>
<Route path='/login' component={Login}/>
จาก route เราสามารถกำหนด Path ว่า เมื่อมี request เข้ามาตาม path ให้มันไป render component ไหน ต่อไปลองไปใช้ Link กันดูบ้างครับ
<li><Link to='/'>Home</Link></li>
<li><Link to='/search'>Search</Link></li>
<li><Link to='/login'>Login</Link></li>
เมื่อเราลองใช้ Link ดูมันก็จะ render ไปเป็น tag a จากนั้นลองไปใช้ Switch กันดูครับ แต่ก่อนอื่น จากตัวอย่างเราจะเห็นว่าเราสามารถใช้ Route ที่ไหนก็ได้ ดังนั้นเราสามารถใช้ Switch เพื่อ group Route ได้ Switch จะทำการ iterate Route children elements แต่ละตัว จากนั้นก็จะ render elements แรกที่ matches เมื่อเราได้รู้จักกันหมดแล้ว จากนั้นผมจึงได้สร้างเมนูโดยใช้การ Route ออกมา โดยเมนูนั้นผมใช้ semantic-ui-react เป็น css template ดังนั้นโค้ดที่ผมได้ทั้งหมดก็จะได้เป็น
ReactDOM.render((
	<BrowserRouter>
	<App />
	</BrowserRouter>
), document.getElementById('root'))
export default class App extends Component {
	render() {
		return (
			<main>
				<MenuBar />
				<Switch>
					<Route exact path='/' component={Home}/>
					<Route path='/search' component={Search}/>
					<Route path='/login' component={Login}/>
				</Switch>
			</main>
		)
	}
}
export default class MenuBar extends Component {
	state = { activeItem: 'home' }
	handleItemClick = (e, { name }) => this.setState({ activeItem: name })

	render(){
		const { activeItem } = this.state

		return(
			<Menu inverted>
				<Menu.Item as={Link} to='/' name='home' active={activeItem === 'home'} onClick={this.handleItemClick} />
				<Menu.Item as={Link} to='/search' name='search' active={activeItem === 'search'} onClick={this.handleItemClick} />
				<Menu.Menu position='right'>
					<Menu.Item as={Link} to='/login' name='login' active={activeItem === 'login'} onClick={this.handleItemClick} />
				</Menu.Menu>
			</Menu>
		)
	}
}
comments

[1]
Adobe-PDF
848 D
[1]
Android
739 D
[40]
Animal
832 D
[1]
Apache
847 D
[2]
[10]
[2]
CMS-SMF
849 D
[1]
[3]
[1]
Database
847 D
[4]
[1]
Docker
743 D
[1]
Fruit
832 D
[2]
Git
635 D
[5]
HTML
635 D
[1]
Housework
837 D
[2]
IT
829 D
[2]
Imacro
849 D
[17]
Java
632 D
[1]
Java-Web
739 D
[1]
[2]
MQL5
661 D
[3]
MakeMoney
634 D
[18]
[1]
Maven
633 D
[1]
Mobile
846 D
[1]
NodeJs
634 D
[3]
Physics
630 D
[4]
PugJS
634 D
[2]
React
644 D
[132]
Science
831 D
[1]
[2]
Spring
633 D
[7]
[2]
[1]
[4]
Ubuntu
798 D
[1]
WebLogic
830 D
[4]