什么是局部刷新，举一个简单的例子，回到仰止社区主页，点击分类，每次切换页面并没有跳转，而是只刷新了帖子列表这个块，这就是局部刷新，在 react 中可以依靠React Router来实现，这篇帖子实现一个简单的导航栏链接局部刷新的功能，如果你有 react 基础，或者像我一样浅显的会一点 react ，可以写一些简单的页面，应该能比较轻松的看懂，刚入门 react 的建议先去官网或者b站学习一下再回来。

React Router

它的用法和自定义组件用法很像，比如网站 header 导航栏每个页面都有，点击链接只刷新 body 的内容，需要在代码中 body 的位置放置 Routes 组件，组件内包括你自定义组件（页面的 body 内容），这一步放入了页面 body 各页面组件内容，同时需要在导航栏里放置链接 NavLink 组件，填入 Route 组件引入的页面链接。同时需要用一个 BrowserRouter 包裹所有的 NavLink 和 Routes 组件，这样就可以把他们联系了起来，点击 Link 显示对应的 Route 。

React Router 安装

react 并不含这个包，需要单独安装一下，写本次教程的时候使用的版本号是 6 ，每个版本是有用法上的差异的，注意安装时版本号与教程的统一！

npm install react-router-dom@6

引入 React Route 组件

一般在 App.jsx ，或者根目录下的 index.js 文件内引入，因为我的代码是在 index.js 文件直接引用 App 组件作为页面内容，页面的内容都在 App.jsx 下，所以直接在 App.jsx 内引入。

import { Route, BrowserRouter, Routes } from "react-router-dom";

页面主文件内插入 BrowserRouter ， Routes 组件

App.jsx

import React from 'react';
import { Component } from 'react';
import { Route, BrowserRouter, Routes } from "react-router-dom";
import Header from './componets/header';
import Home from './pages/home'
import Products from './pages/products'
import Technology from './pages/technology'

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return (
            <BrowserRouter>
                <div className='page'>
                    <Header />
                    <Routes>
                        <Route exact path="/" element={<Home />} />
                        <Route path="/home" element={<Home />} />
                        <Route path='/products' element={<Products />} />
                        <Route path='/technology' element={<Technology />} />
                        <Route path="*" element={<p>There's nothing here!</p>} />
                    </Routes>
                </div>
            </BrowserRouter>

        )
    }
}

我的页面很简单，一目了然，使用 BrowserRouter 包裹页面，页面内 Header 为导航栏组件，我会在下面讲到导航栏文件怎么写，然后就是 body 内容，Routes 组件包裹着所有的 Route 组件，同时也起着申明所有 Route 组件的作用，声明后可以在 Link 中直接使用，实现链接页内刷新。

值得一提的是，<Route exact path="/" element={<Home />} /> 为直接访问地址时加载的 body 内容是 Home 组件。 <Route path="*" element={<p>There's nothing here!</p>} /> 代表网址访问未声明的路由时返回的 body 内容。

创建各个页面 body 组件内容

本项目是在 pages 目录下创建的组件，你可以选择自己喜欢的目录结构自行创建文件夹。这里以 Home 组件为例。

import React from 'react';

export default function Home() {
    return (
        <div className='body'>
            HOME
        </div>
    )
}

很简单，就是普通的自定义组件，简单到不包含参数，其他页面模仿这个模板填写即可，注意替换 Home 组件名为其他路由组件的名字，例如 products 和 technology 。

Header 导航栏组件

我把导航栏组件放在了 componets 目录下，其代码如下：

import React from 'react';
import { NavLink } from "react-router-dom";

function Header() {
    const links = [
        {
            to: '/home',
            name: '主页'
        },
        {
            to: '/products',
            name: '产品'
        },
        {
            to: '/technology',
            name: '技术'
        }
    ]
    return (
        <div className='header' >
            <div className='logo'>
                <a href='/home' className='usb7'>usb7</a>
            </div>
            <div className='links'>
                {links.map((link) => (
                    <NavLink style={({ isActive }) => { return { color: isActive ? "#9A2535" : "#00000050" } }} to={link.to}>
                        {link.name}
                    </NavLink>
                ))}
            </div>
            <div className='header_right'></div>
        </div>
    )
}

export default Header;

项目使用到了列表渲染这个知识点，这个是 react 的基础，如果不懂请先看 react 官方教程。

Header 组件中引入了 React Route 的 NavLink ，这个就是局部刷新的触发链接，一个简单的 NavLink ，是这样的：

<NavLink to='/home'>home</NavLink>

如果想要在链接 active 状态下实现不一样颜色，可以这样写：

<NavLink style={({ isActive }) => { return { color: isActive ? "#9A2535" : "#00000050" } }} to='/home'>home</NavLink>

这是 React Route 官方的标准写法，注意 css 的 active 属性并不能在导航栏内生效，因此只能这样写。

至此，局部刷新功能基本上已经实现了🎉~