React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹

更新時(shí)間：2022年09月28日 16:53:25 作者：月光曬了很涼快

這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

1. 路由使用

安裝路由模塊：

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

yarn add react-router-dom@5

路由相關(guān)組件：

路由模式組件：包裹整個(gè)應(yīng)用，一個(gè)React應(yīng)用只需要使用一次

HashRouter：使用URL的哈希值實(shí)現(xiàn) （localhost:3000/#/first）
BrowserRouter：使用H5的history API實(shí)現(xiàn)（localhost3000/first）

導(dǎo)航組件：用于指定導(dǎo)航鏈接, 最終Link會編譯成a標(biāo)簽

Link: 不會有激活樣式
NavLink：如果地址欄中的地址和 to 屬性相匹配，則會有激活樣式

路由規(guī)則定義組件：指定路由規(guī)則和對應(yīng)匹配成功后要渲染的組件

Route：

path屬性：路由路徑，在地址欄中訪問的地址
component屬性：和規(guī)則匹配成功后渲染的組件 /render/children

各組件關(guān)系示意圖：

定義路由的模式：

為了日后讓當(dāng)前項(xiàng)目中所有的組件都受到路由控制，定義在index.js中，在最頂層定義路由模式。src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './utils/init'
// 引入路由相關(guān)組件  路由模式組件，告訴當(dāng)前項(xiàng)目，我們要使用的路由模式
// HashRouter hash路由模式
// BrowserRouter history路由模式，上線時(shí)，需要對nginx進(jìn)行配置
import { BrowserRouter as Router, HashRouter } from 'react-router-dom'
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
)

定義路由規(guī)則：

路由規(guī)則組件可以定義在src/index.js文件中，也可以定義在App組件中。

本次定義在src/App.js文件中。

import React, { Component } from 'react'
// Route 定義路由規(guī)則  路由地址和匹配成功后要渲染的組件
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 />
        {/* 定義路由規(guī)則 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    )
  }
}
export default App

2. 聲明式導(dǎo)航

描述：

使用 Link 或 NavLink 組件完成聲明式導(dǎo)航的定義、

Link/NavLink 區(qū)別：

Link組件不會根據(jù)路由的變化而添加或修改編譯后html標(biāo)簽中的屬性
NavLink會根據(jù)路由的變化而自動修改編譯后html標(biāo)簽中的屬性

如果當(dāng)前的路由規(guī)則和 Navlink 中的 To 所寫的規(guī)則一致則添加 class 樣式，

默認(rèn)名稱為 active，可以通過 activeClassName 來修改匹配成功后樣式名稱。

使用：

import React, { Component } from 'react'
// Route 定義路由規(guī)則  路由地址和匹配成功后要渲染的組件
// Link 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a
// NavLink 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a,但是它有激活樣式(地址欄中的地址和to屬性匹配，就有內(nèi)置樣式名)
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 匹配規(guī)則，默認(rèn)為模糊匹配
            嚴(yán)格匹配:exact
            修改激活樣式名稱：activeClassName='aaa'
          */}
          {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */}
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        {/* 定義路由規(guī)則 */}
        {/* 
        匹配默認(rèn)為模糊匹配，而且它還會一直匹配到?jīng)]有規(guī)則組件為止
        嚴(yán)格匹配:exact
        */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    )
  }
}
export default App

利用 Switch 嚴(yán)格匹配路由：

import React, { Component } from 'react'
// Route 定義路由規(guī)則  路由地址和匹配成功后要渲染的組件
// Link 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a
// NavLink 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a,但是它有激活樣式(地址欄中的地址和to屬性匹配，就有內(nèi)置樣式名)
// Switch 多個(gè)路由規(guī)則只匹配一個(gè)
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 匹配規(guī)則，默認(rèn)為模糊匹配
            嚴(yán)格匹配:exact
            修改激活樣式名稱：activeClassName='aaa'
          */}
          {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */}
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        {/* 定義路由規(guī)則 */}
        {/* 
        匹配默認(rèn)為模糊匹配，而且它還會一直匹配到?jīng)]有規(guī)則組件為止
        嚴(yán)格匹配:exact
        */}
        <Switch>
        <Route path="/about" component={About} />
        {/* 注意這個(gè)規(guī)則要放在最后，否則所有路由都會走 home 頁面 */}
        <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}
export default App

重定向和404：

import React, { Component } from 'react'
// Route 定義路由規(guī)則  路由地址和匹配成功后要渲染的組件
// Link 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a
// NavLink 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a,但是它有激活樣式(地址欄中的地址和to屬性匹配，就有內(nèi)置樣式名)
// Switch 多個(gè)路由規(guī)則只匹配一個(gè)
// Redirect 重定向  使用它，一定要用到Switch，否則有死循環(huán)的問題
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>
        {/* 如果你想用對于匹配渲染成功后的組件使用編程式導(dǎo)航，你默認(rèn)情況下，你只能在規(guī)則匹配成功后的組件本身中使用，它的子組件都不行 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 重定向 */}
        <Redirect exact from="/" to="/home" />
        {/* 以上的路由沒有一個(gè)匹配成功的，則用404頁面 path屬性不要寫 */}
        <Route component={Notfound} />
        </Switch>
      </div>
    )
  }
}
export default App

3. 編程式導(dǎo)航

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>
        {/* 如果你想用對于匹配渲染成功后的組件使用編程式導(dǎo)航，你默認(rèn)情況下，你只能在規(guī)則匹配成功后的組件本身中使用，它的子組件都不行 */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 重定向 */}
        <Redirect exact from="/" to="/home" />
        {/* 以上的路由沒有一個(gè)匹配成功的，則用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組件中回關(guān)于</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組件中回關(guān)于</button>
  }
}
export default Btn