本文以 react route 版本6以上做說明，舊版本不在本文涵蓋範圍中～

react route

react route 就是讓 react 專案中能進行路由的功能
簡單來說跟 <a href="blabla"></a> 的功能類似，藉由 react route 可以連接到特定頁面（元件），預設 error page，回到上一頁等等。

安裝react route

要使用 react route 就要先進行安裝，在終端機內輸入 npm install react-router-dom@6
如果是安裝 yarn 則輸入 yarn add react-router-dom@6

react route 基本設置

因為要在整個 react app 中進行路由，所以要從最外層把整個元件包起來

打開 index.js 從 'react-router-dom' 引入 BrowserRouter

import { BrowserRouter } from 'react-router-dom';

將整個 App component 用 <BrowserRouter> 包起來，如圖所示

路由到其他元件 route to other component

先建立幾個元件 Home / Contact / About

Home.js
其他比照辦理XD
只要做出差別，讓自己知道現在在哪個元件即可

export default function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  )
}

回到 App.js
從 react-router-dom 引入 Routes 跟 Route

import { Routes, Route } from 'react-router-dom'

function App() {
  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </div>
  )
}

重整視窗，畫面應該會顯示為渲染 <Home /> 元件的狀態

• <Routes/> 包裹所有單一路由 <Route/> 的外層容器/父層
• <Route/> 建立單一路由的元件，有兩個屬性 path(路徑名) 跟 element(該路徑下要渲染出的元件)
  path 以 / 作為開頭，而 Home component 就是/ 也就是第一個被渲染出的組件

路由到其他元件的另種方法 useRoutes + children

<Routes/> 跟 <Route/> 是用jsx的格式，如果想用 js object 的格式，可以使用 useRoutes 搭配 children

從 react-router-dom 引入 useRoutes

import { useRoutes } from 'react-router-dom'

以下內容跟 <Routes/>+<Route/> 達成的內容完全相同，依個人喜好使用囉

function App() {
  let element = useRoutes([
    {
      path: '/',
      element: <Home />,
      children: [
        { path: '/about', element: <About /> },
        { path: '/contact', element: <Contact /> },
      ],
    },
  ])
  return <div className='App'>{element}</div>
}

用 Link 從 component route 到其他 component

到 Home.js，從 從 'react-router-dom' 引入 Link

import { Link } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to='about'>About page</Link>
      <Link to='contact'>Contact page</Link>
    </div>
  )
}

這時候點擊 Link 就可以 route 到指定的目錄下了

• <Link/> 屬性 to 表示要連去哪個路徑，如果是回到 Home 的話，輸入 / 即可，to 的路徑不僅限於一層，可以 route 到很多層下的子組件中，如/parent/child/blabla

明天接續說明路由的其他奧秘之處xd

參考資料

https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
https://reactrouter.com/en/main/start/tutorial