React Browser Router (Switch, Route, Link)

| React | 1522 | 899 วันที่แล้ว
วันนี้ผมจะลองทำ 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
1103 D
[1]
Android
994 D
[40]
Animal
1087 D
[1]
Apache
1103 D
[2]
[1]
[10]
CMS-Joomla
1104 D
[2]
CMS-SMF
1104 D
[1]
[1]
[1]
[3]
[1]
Database
1103 D
[4]
[1]
Docker
999 D
[1]
[1]
Fruit
1087 D
[2]
Git
890 D
[5]
HTML
890 D
[1]
Housework
1092 D
[2]
IT
1084 D
[2]
Imacro
1104 D
[17]
Java
887 D
[1]
Java-Web
994 D
[1]
[2]
MQL5
916 D
[3]
MakeMoney
889 D
[18]
[1]
[1]
Maven
888 D
[5]
[1]
Mobile
1101 D
[1]
NodeJs
890 D
[3]
Physics
885 D
[4]
PugJS
890 D
[2]
React
899 D
[132]
Science
1086 D
[1]
[2]
Spring
888 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1054 D
[1]
WebLogic
1085 D
[4]