iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

Be friend with JavaScript系列 第 39

React Router

首先要安裝 react router dom: npm install react-router-dom
再來要在專案中引入 module:

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

<BrowserRouter>
包在最外層,被 <BrowserRouter> 包起來的區域都可以使用 react-router-dom 所提供的功能
<HashRouter>
包在最外層做使用,路徑會有 #
<Switch>
只有第一個符合 URL 的元件會被 render
<Route>
只要符合目前的 URL 都會 render 指定的 UI
<Link>
在 React 裡面的 <Link to=""></Link> 代表 HTML 的 <a href=""></a>
<Redirect>
重新定向


例如:
有個頁面的 Navbar 有 Home 和 About,Home 和 Nav 有對應的文字
App.js

// App.js
import Home from "./Home";
import Nav from "./Nav";
import About from "./About";
import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

p.s 也可寫成這樣:

<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
  • exact 表示路徑完全符合才會 render 該頁面

Nav.js

// Nav.js
import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <nav>
      <ul>
        <Link to="/">
          <li>Home</li>
        </Link>
        <Link to="/about">
          <li>About</li>
        </Link>
      </ul>
    </nav>
  );
};

export default Nav;

此時點擊 Home 時,網頁上顯示 Home,路徑為 http://localhost:3000/
https://ithelp.ithome.com.tw/upload/images/20211011/20140282Q8nFW1IIuZ.jpg
點擊 About 時,網頁上顯示 About,路徑為 http://localhost:3000/about
https://ithelp.ithome.com.tw/upload/images/20211011/201402824p32XMxjqX.jpg

而如果我們將 App.js 的 BrowserRouter 改成 HashRouter

//App.js
import { HashRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Nav />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </HashRouter>
  );
}

export default App;

此時點擊 Home,路徑會變成 http://localhost:3000/#/
https://ithelp.ithome.com.tw/upload/images/20211011/20140282ZZl2NdPueq.jpg
點擊 About 時,路徑會變成 http://localhost:3000/#/about
https://ithelp.ithome.com.tw/upload/images/20211011/20140282VPCBn9diuZ.jpg


上一篇
React Hooks - useContext
系列文
Be friend with JavaScript39

尚未有邦友留言

立即登入留言