React Browser Router (Switch, Route, Link)

| React | 856 | 554 วันที่แล้ว
วันนี้ผมจะลองทำ 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
758 D
[1]
Android
649 D
[40]
Animal
742 D
[1]
Apache
758 D
[2]
[10]
[2]
CMS-SMF
759 D
[1]
[3]
[1]
Database
758 D
[4]
[1]
Docker
654 D
[1]
Fruit
742 D
[2]
Git
545 D
[5]
HTML
545 D
[1]
Housework
747 D
[2]
IT
739 D
[2]
Imacro
759 D
[17]
Java
542 D
[1]
Java-Web
649 D
[1]
[2]
MQL5
571 D
[3]
MakeMoney
544 D
[18]
[1]
Maven
543 D
[1]
Mobile
756 D
[1]
NodeJs
544 D
[3]
Physics
540 D
[4]
PugJS
544 D
[2]
React
554 D
[132]
Science
741 D
[1]
[2]
Spring
543 D
[7]
[2]
[1]
[4]
Ubuntu
709 D
[1]
WebLogic
740 D
[4]