1 基本使用

1.1 安装js库

react-router-dom，react的一个插件库，用于实现SPA应用，基于react的项目基本都会用到。

当前项目安装命令

npm i react-router-dom 
// 或者
yarn add react-router-dom

1.2 使用示例

示例效果图1.2-1如下所示：

静态页面我们不在给出，这里直接展示App.jsx和About与Home组件代码。

App.jxs组件代码1.2-1如下所示：

import React, { Component } from 'react'
import { Link, Route } from "react-router-dom";
import About from './components/About'
import Home from './components/Home'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，<a></a>调整不同的页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
            <a className="list-group-item active" href="./home.html">Home</a> */}
              {/* react中靠路由链接实现组件切换--编写路由链接 */}
              <Link className='list-group-item' to="/about">About</Link>
              <Link className='list-group-item' to="/home">Home</Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

About组件代码1.2-2如下所示：

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
      <h3>我是About的内容</h3>
    )
  }
}

Home组件代码1.2-3如下所示：

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <h3>我是Home的内容</h3>
    )
  }
}

index.js代码1.2-4如下所示：

// 引入react核心库
import React from "react";
// 引入react-dom
import ReactDOM from 'react-dom/client'
// 引入路由器
import { BrowserRouter } from "react-router-dom";
// 引入App组件
import App from './App'

// 渲染组件到页面
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

1.3 总结

路由的基本使用：

• 导航区a标签改为Link标签，<Link t="/xxx">Demo</Link>
• 展示区些Route标签进行路径的匹配，<Route path='/xxx' component={Demo}/>
• <App/>最外侧包裹一个<BrowserRouter>或<HashRouter>

2 路由组件与一般组件

2.1 路由组件

React Router 由三个主要的组件构成：

1. <BrowserRouter>：在浏览器端使用 HTML5 的 history API 实现路由；
2. <HashRouter>：在浏览器端使用 URL 中的 hash 实现路由；
3. <MemoryRouter>：在内存中实现路由，适用于服务器渲染等场景。

在这些 Router 组件内部，你可以使用 <Route> 组件来定义路由规则，并使用 <Link> 或 <NavLink> 组件来创建链接。

路由组件和一般组件在 React 中有一些区别。

路由组件是指用于处理路由的组件，它们通常与特定的 URL 相关联，当 URL 匹配时会被渲染。路由组件的定义方式可以根据所使用的路由库而异，但通常都需要在组件中定义路由规则，如 <Route> 组件。

一般组件是指用于渲染 UI 的组件，它们通常是应用程序的一部分，并且可以在任何地方使用。一般组件可以被其他组件嵌套或包含，它们通常不需要处理 URL 相关的逻辑。

2.2 路由组件与普通组件示例

下面我们还上以#1示例为例，我们把导航封装为普通组件，其他同上。

About和Home组件为路由组件我们放入pages文件夹下，普通组件放在components文件夹下。

Header组件代码2-1如下所示：

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    // console.log('Header组件收到的props：', this.props);
    return (
      <div className="page-header"><h2>React Router Demo</h2></div>
    )
  }
}

App.jsx相应部分替换为<Header />

然后我们看下普通组件与路由组件接收的props，普通组件默认为空，我们看下路由组件接收了什么？

2.3 总结

路由组件与一般组件的区别：

• 写法不同
  • 一般组件：<Demo />
  • 路由组件：<Route path=“/demo” component={Demo}/>
• 存放位置不同（约定非强制）：
  • 一般组件：components文件夹下
  • 路由组件：pages文件夹下
• 接收到的props：
  • 一般组件：传递什么属性，接收什么props
  • 路由组件：接收到固定的三个属性,具体含义随用随解释
    • history
      • go: f go(n)
      • goBack: f goBack()
      • goForward: f goForard()
      • push: f push(path, state)
      • replace: f replace(path, state)
    • location:
      • pathname: “/xxx”
      • search: “”
      • state: undefined
    • match:
      • params: {}
      • path: “/xxx”
      • url: “/xxx”

3 NavLink组件

3.1 NavLink 简介

NavLink 是 React Router 提供的一个组件，它是 Link 的一个特殊版本，可以用于为当前活动的路由添加样式。

NavLink 的用法和 Link 类似，都是通过 to 属性指定要跳转的 URL，但 NavLink 会在当前路由与 to 属性指定的 URL 匹配时，自动添加一个名为 active 的 CSS 类名，可以用于设置当前路由的样式。如果不希望使用 active 类名，可以通过 activeClassName 属性来指定其他类名。

3.2 NavLink实现高亮与自定义样式

因为我们样式使用的是bootstrap.css,当NavLink指定样式名称为"active"时和bootstrap.css的高亮样式重名。即如果想实现路由链接高亮效果，可以直接在NavLink标签些active 属性。

以#2中示例为例，我们把Link标签替换为NavLink，App.jsx代码3.1如下：

<NavLink className='list-group-item' to="/about">About</NavLink>
<NavLink className='list-group-item' to="/home">Home</NavLink>

其他同上

下面我们自定义样式，直接在首页，样式代码如下：

  <style>
    .g2zh{
      background-color: orange !important;
      color: white !important;
    }
  </style>

NavLink标签指定样式名称，如下：

<NavLink activeClassName="g2zh" className='list-group-item' to="/about">About</NavLink>
<NavLink activeClassName="g2zh" className='list-group-item' to="/home">Home</NavLink>

效果如下图3.2-1所示，

结语

❓QQ:806797785

⭐️源代码仓库地址：https://github.com/gaogzhen/react-staging.git

参考：

[1]React视频教程[CP/OL].2020-12-15.p77-79.

[2]React官网[CP/OL].

[3]ChatGPT[CP/OL].