React路由規則定義與宣告式導航及程式設計式導航分別介紹

2022-09-30 14:00:15

1. 路由使用

安裝路由模組：

路由模組不是react自帶模組，需要安裝第3方模組：

yarn add react-router-dom@5

路由相關元件：

路由模式元件：包裹整個應用，一個React應用只需要使用一次

HashRouter：使用URL的雜湊值實現（localhost:3000/#/first）
BrowserRouter：使用H5的history API實現（localhost3000/first）

導航元件：用於指定導航連結, 最終Link會編譯成a標籤

Link: 不會有啟用樣式
NavLink：如果位址列中的地址和 to 屬性相匹配，則會有啟用樣式

路由規則定義元件：指定路由規則和對應匹配成功後要渲染的元件

Route：

path屬性：路由路徑，在位址列中存取的地址
component屬性：和規則匹配成功後渲染的元件 /render/children

各元件關係示意圖：

定義路由的模式：

為了日後讓當前專案中所有的元件都受到路由控制，定義在index.js中，在最頂層定義路由模式。src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './utils/init'
// 引入路由相關元件  路由模式元件，告訴當前專案，我們要使用的路由模式
// HashRouter hash路由模式
// BrowserRouter history路由模式，上線時，需要對nginx進行設定
import { BrowserRouter as Router, HashRouter } from 'react-router-dom'
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
)

定義路由規則：

路由規則元件可以定義在src/index.js檔案中，也可以定義在App元件中。

本次定義在src/App.js檔案中。

import React, { Component } from 'react'
// Route 定義路由規則  路由地址和匹配成功後要渲染的元件
import { Route } from 'react-router-dom'
// 匹配成功後渲染的元件
import Home from './views/Home'
import About from './views/About'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App元件</h3>
        <hr />
        {/* 定義路由規則 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    )
  }
}
export default App

2. 宣告式導航

描述：

使用 Link 或 NavLink 元件完成宣告式導航的定義、

Link/NavLink 區別：

Link元件不會根據路由的變化而新增或修改編譯後html標籤中的屬性
NavLink會根據路由的變化而自動修改編譯後html標籤中的屬性

如果當前的路由規則和 Navlink 中的 To 所寫的規則一致則新增 class 樣式，

預設名稱為 active，可以通過 activeClassName 來修改匹配成功後樣式名稱。

使用：

import React, { Component } from 'react'
// Route 定義路由規則  路由地址和匹配成功後要渲染的元件
// Link 導航元件，它編譯生成後的html標籤只能是 a
// NavLink 導航元件，它編譯生成後的html標籤只能是 a,但是它有啟用樣式(位址列中的地址和to屬性匹配，就有內建樣式名)
import { Route, Link, NavLink } from 'react-router-dom'
// 匹配成功後渲染的元件
import Home from './views/Home'
import About from './views/About'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App元件</h3>
        <div>
          {/* <Link to="/home">Home</Link> ---
          <Link to="/about">About</Link> */}
          {/* 
            NavLink 匹配規則，預設為模糊匹配
            嚴格匹配:exact
            修改啟用樣式名稱：activeClassName='aaa'
          */}
          {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */}
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        {/* 定義路由規則 */}
        {/* 
        匹配預設為模糊匹配，而且它還會一直匹配到沒有規則元件為止
        嚴格匹配:exact
        */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    )
  }
}
export default App

利用 Switch 嚴格匹配路由：

import React, { Component } from 'react'
// Route 定義路由規則  路由地址和匹配成功後要渲染的元件
// Link 導航元件，它編譯生成後的html標籤只能是 a
// NavLink 導航元件，它編譯生成後的html標籤只能是 a,但是它有啟用樣式(位址列中的地址和to屬性匹配，就有內建樣式名)
// Switch 多個路由規則只匹配一個
import { Route, Link, NavLink, Switch } from 'react-router-dom'
// 匹配成功後渲染的元件
import Home from './views/Home'
import About from './views/About'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App元件</h3>
        <div>
          {/* <Link to="/home">Home</Link> ---
          <Link to="/about">About</Link> */}
          {/* 
            NavLink 匹配規則，預設為模糊匹配
            嚴格匹配:exact
            修改啟用樣式名稱：activeClassName='aaa'
          */}
          {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */}
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        {/* 定義路由規則 */}
        {/* 
        匹配預設為模糊匹配，而且它還會一直匹配到沒有規則元件為止
        嚴格匹配:exact
        */}
        <Switch>
        <Route path="/about" component={About} />
        {/* 注意這個規則要放在最後，否則所有路由都會走 home 頁面 */}
        <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}
export default App

重定向和404：

import React, { Component } from 'react'
// Route 定義路由規則  路由地址和匹配成功後要渲染的元件
// Link 導航元件，它編譯生成後的html標籤只能是 a
// NavLink 導航元件，它編譯生成後的html標籤只能是 a,但是它有啟用樣式(位址列中的地址和to屬性匹配，就有內建樣式名)
// Switch 多個路由規則只匹配一個
// Redirect 重定向  使用它，一定要用到Switch，否則有死迴圈的問題
import { Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'
// 匹配成功後渲染的元件
import Home from './views/Home'
import About from './views/About'
// import Detail from './views/Detail'
import Notfound from './views/Notfound'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App元件</h3>
        <div>
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        <Switch>
        {/* 如果你想用對於匹配渲染成功後的元件使用程式設計式導航，你預設情況下，你只能在規則匹配成功後的元件本身中使用，它的子元件都不行 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 重定向 */}
        <Redirect exact from="/" to="/home" />
        {/* 以上的路由沒有一個匹配成功的，則用404頁面 path屬性不要寫 */}
        <Route component={Notfound} />
        </Switch>
      </div>
    )
  }
}
export default App

3. 程式設計式導航

App.jsx：

import React, { Component } from 'react'
import { Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'
// 匹配成功後渲染的元件
import Home from './views/Home'
import About from './views/About'
// import Detail from './views/Detail'
import Notfound from './views/Notfound'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App元件</h3>
        <div>
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        <Switch>
        {/* 如果你想用對於匹配渲染成功後的元件使用程式設計式導航，你預設情況下，你只能在規則匹配成功後的元件本身中使用，它的子元件都不行 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 重定向 */}
        <Redirect exact from="/" to="/home" />
        {/* 以上的路由沒有一個匹配成功的，則用404頁面 path屬性不要寫 */}
        <Route component={Notfound} />
        </Switch>
      </div>
    )
  }
}
export default App

home元件：

import React, { Component } from 'react'
import Btn from './Btn'
class Home extends Component {
  jumpUrl = () => {
    // 寫法1
    // this.props.history.push('/about')
    // 寫法2
    this.props.history.push({
      pathname: '/about'
    })
  }
  render() {
    return (
      <div>
        <h3>首頁展示</h3>
        <button onClick={this.jumpUrl}>home元件中回關於</button>
        <Btn {...this.props} />
      </div>
    )
  }
}
export default Home

btn元件：

import React, { Component } from 'react'
class Btn extends Component {
  jumpUrl = () => {
    this.props.history.push('/about')
  }
  render() {
    return <button onClick={this.jumpUrl}>在btn元件中回關於</button>
  }
}
export default Btn

注意：

如果你想用對於匹配渲染成功後的元件使用程式設計式導航，預設情況下，你只能在規則匹配成功後的元件本身中使用，它的子元件都不行
直接匹配的路由的子元件要想使用程式設計式導航，則需要給他傳遞 props

到此這篇關於React路由規則定義與宣告式導航及程式設計式導航分別介紹的文章就介紹到這了,更多相關React路由規則內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React路由規則定義與宣告式導航及程式設計式導航分別介紹

目錄

1. 路由使用

2. 宣告式導航

3. 程式設計式導航

熱門文章