React路由攔截模式及withRouter範例詳解

2022-08-03 22:03:51

一、路由攔截

在前面兩篇路由部落格基礎上，我們將ReactRouter.js的我的profile路由設定成路由攔截的：

<Route path="/profile" render={() => 
                isAuth() ? <Profile/> : <Redirect to="/login"></Redirect>
              }></Route>

新建Login.js元件，寫入程式碼：

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>
          <h2>Login</h2>
          <input type="text"></input>
          <button onClick={() => {
              localStorage.setItem('token', 123  )
              this.props.history.push('/profile')
          }}>模擬登入</button>
      </div>
    )
  }
}

效果：

二、路由模式

之前帶#號的路由模式為哈西模式，如果想不帶#號的話，可以寫成如下：

但是BrowserRouter沒有#路徑，後端如果沒有對應的路徑處理邏輯，就會404。

三、withRouter

如果我們在我的頁面裡面還有我的訂單路由的話，那麼在Profile.js中寫入跳轉的語法：

import React from 'react'

export default function Profile(props) {
  return (
    <div>
        <h1>Profile</h1>
        <div onClick={() => {
          props.history.push('/profileorder')
        }}>我的訂單</div>
      </div>
  )
}