0%

React Router 基本概念

Posted on Edited on In

React Router 的三個重要元件

Router:

  • BrowserRouter:
    頁面 url 不會有 # 字, 它的原理是使用 HTML5 History API(pushState, replaceState, popState), 來使你的內容依照 url 做改變, 但需要做 server 的配置
  • HashRouter:
    頁面 url 會有 # 字, 透過 hash 來對路由進行控制

Code Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById("root")
);

Route Matcher:

  • Switch:
    每當 Switch 被 render 時, 它會搜尋所有 children Route 的 path 是否有 match 到現在的 url, 如果有 match 到某個 Route 時, 就會 render 這個 Route, 且 Switch 會停下來不會再往下找了, 如果都沒有匹配到 Route, 則會 render null
  • Route:
    一般 match 只要 url 中有符合即可, 若要完整 match 完整的 url 記得在 Route 加上 exact, 另外記得把 path=”/“ 放到最後, 否則任何路徑都會被 match 到。

Code Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";


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


ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

  • Link:
    React Router 提供的 Link 元件, 其實就是幫你 Render 一個 a Tag
  • NavLink:
    比 Link 元件多一個 activeClassName, 當 match 到路由, 會幫你置換 css style
  • Redirect:
    如果你想要強制導頁, 則可以使用這個元件

Code Example:

1
2
3
4
5
6
7
8
9
<Link to="/">Home</Link>
// <a href="/">Home</a>

<NavLink to="/react" activeClassName=“hurray”>
    React
</NavLink>
// <a href="/react" className="hurray">React</a>

<Redirect to="/login" />

參考連結:

官方教學