react-router

SSR 與 CSR ?

SSR => server side render

CSR => client side render

SSR

app.get('/', function (req, res) {
  res.send('hello world');
})

app.get('/hello', function (req, res) {
  res.send('你好');
})

app.get('/hello/:name', function (req, res) {
  res.send('你好, ' + req.params.name);
})

CSR

  <Switch>
    <Route path="/evaluations/:evaluationId/presentation" render={() => null} />
    <Route path="/cases/:programId" render={() => null} />
    <Route path="/cases/:programId/recusals/:recusalIndex/print" render={() => null} />
    <Route component={SiteHeader} />
  </Switch>

所以 CSR 可以幹嘛？

SPA(Single Page Application)
畫面僅需重新 render 所需要改變的部分
通過管理 URL，實現頁面以及狀態切換
可以「模組化」

click <Link />

switch URL

render component

環境建置

沒啥特別 => 看

官方文件

基本操作 <Route> <Link>

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

你在的頁面
想要切換渲染的 component

  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about/">About</Link>
    </li>
    <li>
      <Link to="/users/">Users</Link>
    </li>
  </ul>
</nav>

link 提供一個

超連結到對應的

網址

click <Link />

switch URL

render component

隨著需要的頁面越多，變化開始有越來越多對應的網址

例如：部落格的文章頁面，商城的商品頁

那怎麼能一次把這些需求寫死吧？

因此，我們要用 “參數” 來指定 routing 的規則。

  <Route path="/posts/:id?" component={PostRender} / >

<Route path="/posts/:id?" component={PostRender} / >

當你定義這行時，你事實上就定義了指定的 component (i.e. PostRender) 的 props.match.params 多了一個 “id” 這個 property
換句話說，當你連結 “…/posts/3838” 的時候，就等於把 3838 當作參數傳給 PostRender 的 props.match.params.id, 你可以在 PostRender 裡頭根據 id 去處理拿到文章的邏輯。

因此子層的 component會這樣寫

function ProgramDetailPage({
  match: {
    params: {
      programId,
    },
  },
}: ContextRouter) {
  return (
    <div style={styles.container}>
      <Query
        variables={{
          id: programId,
        }}
        query={SCHEDULED_PROGRAM_DETAIL}>
        {({ loading }) => {
          if (loading) return <LoadingSpinner />;

          return (
        ...
  );
}

exact: bool

When true, will only match if the path matches the location.pathname exactly.

  // 列舉所有文章
  <Route exact path="/posts" component={Posts} />
  // 展示某篇文章
  <Route path="/posts/:id?" component={PostRender} />