腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

更新時(shí)間：2022年08月03日 16:07:29 作者：你華還是你華

這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、路由攔截

在前面兩篇路由博客基礎(chǔ)上，我們將ReactRouter.js的我的profile路由設(shè)置成路由攔截的：

<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>
    )
  }
}

效果：

二、路由模式

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

但是BrowserRouter沒有#路徑，后端如果沒有對(duì)應(yīng)的路徑處理邏輯，就會(huì)404。

三、withRouter

如果我們?cè)谖业捻撁胬锩孢€有我的訂單路由的話，那么在Profile.js中寫入跳轉(zhuǎn)的語法：

import React from 'react'

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

可以看到報(bào)錯(cuò)了，那我們之前那種寫法不生效了嗎。其實(shí)跟路由的創(chuàng)建有關(guān)系，之前是直接將組件用component屬性直接傳了過去，所以props有history對(duì)象，但是這次我們是采用的render將組件在立即函數(shù)中實(shí)例化了，不傳進(jìn)去：