React Browser Router (Switch, Route, Link)

| React | 1141 | 678 วันที่แล้ว
วันนี้ผมจะลองทำ 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
882 D
[1]
Android
773 D
[40]
Animal
866 D
[1]
Apache
882 D
[2]
[10]
[2]
CMS-SMF
883 D
[1]
[3]
[1]
Database
882 D
[4]
[1]
Docker
778 D
[1]
Fruit
866 D
[2]
Git
669 D
[5]
HTML
669 D
[1]
Housework
871 D
[2]
IT
863 D
[2]
Imacro
883 D
[17]
Java
666 D
[1]
Java-Web
773 D
[1]
[2]
MQL5
695 D
[3]
MakeMoney
668 D
[18]
[1]
Maven
667 D
[1]
Mobile
880 D
[1]
NodeJs
668 D
[3]
Physics
664 D
[4]
PugJS
668 D
[2]
React
678 D
[132]
Science
865 D
[1]
[2]
Spring
667 D
[7]
[2]
[1]
[4]
Ubuntu
832 D
[1]
WebLogic
864 D
[4]