React-Router

---

新手村學習 React 時的小小筆記

若有寫錯的地方，還請留言告訴我惹，感謝大家

---

• React-Router
  • new
    • create-react-app
    • react-router-dom
    • BrowserRouter
  • Pages
  • Routes
  • NotFound
  • Nested
  • More

---

new

create-react-app

• Node >= 14.0.0
• npm >= 5.6

• cd folder of collection

• project name

  • <my-react-app>

npx create-react-app my-react-app

cd my-react-app

• check

npm start

• VSCode

code .

react-router-dom

• /
• /about

npm install react-router-dom@6

BrowserRouter

• entry

  • index.js

• import

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

• <BrowserRouter>

    <BrowserRouter>
      <App />
    </BrowserRouter>

https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app

---

Pages

【更新】：<component> 命名規範為大寫開頭的大駝峰

• 否則會被 ESLint 提示蚯蚓

---

【實際踩雷】

如果不小心漏掉大寫小寫的狀況、又推上 GitHub 遠端倉庫．．．

• 後續若是單純手動改回大寫

  • GitHub 會跳過登錄該檔案的版控

• 變成不管做了什麼修改推出去，遠端都沒有吃到更新，hen 可怕

• 在 <src> 開立資料夾名為 <components>
  • <src> / <components>

components

• 頁面

PageHome.js

PageAbout.js

<nav>
  <li><a href="/">Home</a></li>
  <li><a href="./about">About</a></li>
</nav>

• export fn

function Home() {
  return (
    <main>
      <h2>Welcome to the homepage!</h2>
      <p>You can do this, I believe in you.</p>
    </main>
  );
}

export default Home;

function About() {
  return (
    <main>
      <h2>Who are we?</h2>
      <p>That feels like an existential question, don't you think?</p>
    </main>
  );
}

export default About;

• import to App.js

import Home from './components/PageHome';
import About from './components/PageAbout';

---

Routes

• App.js

import { Routes, Route, Link } from "react-router-dom";

• Routes
  • Route

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
 	  <hr/>

      <nav>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </nav>
	  <hr/>

---

NotFound

<Route path="*" element={<NotFound />} />

• https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes

---

Nested

      <Route element={<Layout />}>
        
      </Route>

		<Route path="/" element={<Home />} />
 		<Route path="about" element={<About />} />

• <></>

function Layout() {
  return (
      <nav>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
      </nav>
  );
}

<Outlet />

function Layout() {
  return (
    <>
      <nav>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
      </nav>
      <Outlet />
    </>
  );
}

• /
• /about
• /about/contact

      <Route path="about" element={<About />}>
        <Route path="contact" element={<Contact />} />
      </Route>

---

More

• 路由表

• https://reactrouter.com/docs/en/v6/hooks/use-routes

• useState to different link

• 動態路由

• https://reactrouter.com/docs/en/v6/getting-started/overview#navigation

• <HashRouter>

• https://reactrouter.com/docs/en/v6/routers/hash-router

• <MemoryRouter>

• https://reactrouter.com/docs/en/v6/routers/memory-router

---

---