React Browser Router (Switch, Route, Link)

| React | 735 | 496 วันที่แล้ว
วันนี้ผมจะลองทำ 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
700 D
[1]
Android
591 D
[40]
Animal
684 D
[1]
Apache
700 D
[2]
[10]
[2]
CMS-SMF
701 D
[1]
[3]
[1]
Database
700 D
[4]
[1]
Docker
595 D
[1]
Fruit
684 D
[2]
Git
487 D
[5]
HTML
487 D
[1]
Housework
689 D
[2]
IT
681 D
[2]
Imacro
701 D
[17]
Java
484 D
[1]
Java-Web
591 D
[1]
[2]
MQL5
513 D
[3]
MakeMoney
486 D
[18]
[1]
Maven
485 D
[1]
Mobile
698 D
[1]
NodeJs
486 D
[3]
Physics
482 D
[4]
PugJS
486 D
[2]
React
496 D
[132]
Science
683 D
[1]
[2]
Spring
485 D
[7]
[2]
[1]
[4]
Ubuntu
650 D
[1]
WebLogic
682 D
[4]