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入門開發實務，松崗。及網路