iT邦幫忙

0

React路由Router及Link to

React路由Router及Link to

需安裝react-router及react-router-dom

npm install react-router react-router-dom -s

網頁換頁功能

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,Route,Link} from 'react-router-dom'

//建立三個元件
const Home = () =>(<div><h2>這是首頁</h2></div>)
const About = () =>(<div><h2>關於我們</h2></div>)
const Topics = () =>(<div><h2>主題一</h2></div>)

ReactDOM.render(
  <BrowserRouter>
      <div className='ui raised segment'>
          <ul>
              <li><Link to='/Home'>首頁</Link></li>
              <li><a href="/about">關於我們</a></li>
              <li><Link to='/topics'>主題一</Link></li>
          </ul>
          <hr/>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route  path='/about' component={About}/>
            <Route exact path='/topics' component={Topics}/>         
          </Switch>
      </div>
 
  </BrowserRouter>,document.getElementById('root')

);

匯入的庫的解釋:
BrowserRouter, HashRouter:讓包在其中的元件擁有路由的能力,BrowserRouter有到後端存取資料的能力,HashRouter僅顯示頁面。
Switch:類似java的switch語句,從上往下找第一個匹配的Route,匹配中了之後,立刻就break。
Route:在url的符合path時,將指定的元件渲染出來,並傳入param。
Link:就類似html的超連結,提供給按鈕或文字連結用的。

程式碼講解:

1.Route加上了exact,網址要完全等於根目錄/才會渲染組件。
2.Link to和a href功能是一樣的,只是Link to的功能較多。參考https://ithelp.ithome.com.tw/articles/10207013
3.有一種NavLink to,功能和Link to差不多,就是一個有style的Link。參考https://ithelp.ithome.com.tw/articles/10207306

資料參考:React入門開發實務,松崗。及網路


尚未有邦友留言

立即登入留言