在 React Bootstrap 中，span、order 和 offset 这三个参数用于定义网格布局中的列（Col）的行为：
span: 6 意味着该列将在一个12列的网格中占用6列。这样可以灵活地控制列的宽度和布局。order: 1 和 order: 2 可以改变两个列的排列顺序，即使它们在代码中声明的顺序是相反的。offset: 2 将在该列前面留出2列的空白，允许创建更加灵活的布局。useLocation 用法:
useLocation 提供当前路由的完整路径（例如：/admin/create）。location.pathname.split('/')将路径拆分，将第一级子路径用于动态后缀更新。例：
import React from 'react';
import {useLocation} from 'react-router-dom';
export default function App () {
const location = useLocation(); // 获取当前路径
let titleSuffix = ""; // 初始化动态后缀为空
// 动态解析路径后缀，只取整个路径中的第一级
if (location.pathname !== "/") {
titleSuffix = location.pathname.split('/')[1];
}
return titleSuffix
}安装 Axios
首先，在项目下安装 Axios 依赖：
npm install axios或者：
yarn add axios在组件中直接调用 Axios
在 React 的函数组件中，你可以直接使用 Axios 进行数据请求。通常我们会结合 React 的 useState 和 useEffect 实现数据的获取和管理，例如：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
axios.get('/api/data')
.then(response => {
setData(response.data);
setLoading(false);
})
.catch(err => {
setError(err);
setLoading(false);
});
}, []);
if (loading) return <div>加载中...</div>;
if (error) return <div>发生错误...</div>;
return (
<div>
<h1>数据展示</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default MyComponent;这种方式简单直观，适用于单个组件内部的数据请求需求。
封装 Axios 实例
为了在整个项目中统一管理和复用 Axios 的配置（如基础 URL、超时配置以及请求与响应拦截器），可以创建一个 Axios 实例。例如：
// axiosInstance.js
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: '<https://api.example.com>',
timeout: 5000,
});
// 请求拦截器：如添加认证 token
axiosInstance.interceptors.request.use(
config => {
// Modify config before request is sent, e.g.,添加token
// config.headers.Authorization = 'Bearer yourToken';
return config;
},
error => Promise.reject(error)
);
// 响应拦截器：统一处理响应
axiosInstance.interceptors.response.use(
response => response,
error => Promise.reject(error)
);
export default axiosInstance;然后在你的组件中引入这个实例，而不是直接使用 Axios，通过这种方式可以确保全局请求配置的一致性和便于维护。
结合 React Context 和 Provider
如果你的应用中有很多组件都需要发起请求，并且希望在统一配置（例如统一注册请求拦截器）后进行调用，可以使用 React 的 Context 来组织 Axios 实例。通过 Provider 将配置好的 Axios 实例传递给整个组件树，以便在各个组件中通过 useContext 取得该实例，这也是符合 React Hooks 思想的一种方式。例如：
// AxiosContext.js
import React, { createContext } from 'react';
import axiosInstance from './axiosInstance';
export const AxiosContext = createContext(axiosInstance);
export const AxiosProvider = ({ children }) => {
return (
<AxiosContext.Provider value={axiosInstance}>
{children}
</AxiosContext.Provider>
);
};然后在组件中使用：
import React, { useContext, useEffect, useState } from 'react';
import { AxiosContext } from './AxiosContext';
const MyComponent = () => {
const axios = useContext(AxiosContext);
const [data, setData] = useState(null);
useEffect(() => {
axios.get('/api/data').then(response => {
setData(response.data);
});
}, [axios]);
return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
};
export default MyComponent;这种 Provider 模式可以有效地将拦截器和其他配置注册到整个应用中，方便管理和使用。
npm i jqueryimport $ from 'jquery';GET方法：
$.ajax({
url: url,
type: "GET",
data: {
},
dataType: "json",
success: function (resp) {
},
});POST方法：
$.ajax({
url: url,
type: "POST",
data: {
},
dataType: "json",
success: function (resp) {
},
});Route组件：npm i react-router-domBrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内Link：跳转到某个链接，to属性表示跳转到的链接Routes：类似于C++中的switch，匹配第一个路径Route：路由，path属性表示路径，element属性表示路由到的内容useParams 和 useSearchParams 获取路径参数Navigate：和Route组件组合使用来实现重定向import { BrowserRouter } from 'react-router-dom';在root.render()中用<BrowserRouter></BrowserRouter>将App组件（或者自己定义的其他有使用路由的组件）括起来。
例如
<BrowserRouter>
<App />
</BrowserRouter>import { Link } from 'react-router-dom';将页面内部跳转所用到的<a href="..."></a> 改为 <Link to="..."></Link>，其他保持不变
import {Routes, Route} from 'react-router-dom';先写一个<Routes></Routes>标签，然后在里面写<Route />标签
其中<Route /> 标签中有两个参数一个是path另外一个是element，path中放匹配的路径，element中放要渲染的标签
例如
<Routes>
<Route path='/' element={<Home />}/>
<Route path='like' element={<Like />}/>
<Route path='about' element={<About />}/>
<Route path='issues' element={<Issues />}/>
</Routes>element中不仅可以放组件的标签，正常的html标签也可以放
例如：
<Routes>
<Route path='/' element={<h1>Hello world</h1>}/>
</Routes><Route path="/web" element={<Web />}>
<Route index path="a" element={<h1>a</h1>} />
<Route index path="b" element={<h1>b</h1>} />
<Route index path="c" element={<h1>c</h1>} />
</Route>注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。（即<Outlet />会根据路由的不同动态的渲染不同的子标签，假如当前的路由为/web/a 则<Outlet />等效于<h1>a</h1>）
解析URL：
<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />获取参数，类组件写法：
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
class Linux extends Component {
state = { }
render() {
console.log(this.props.params);
return <h1>Linux</h1>;
}
}
export default (props) => (
<Linux
{...props}
params={useParams()}
/>
)函数组件写法：
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
const Linux = () => {
console.log(useParams());
return (<h1>Linux</h1>);
}
export default Linux;类组件写法：
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
class Django extends Component {
state = {
searchParams: this.props.params[0], // 获取某个参数
setSearchParams: this.props.params[1], // 设置链接中的参数，然后重新渲染当前页面
}
handleClick = () => {
this.state.setSearchParams({
name: "abc",
age: 20,
})
}
render() {
console.log(this.state.searchParams.get('age'));
return <h1 onClick={this.handleClick}>Django</h1>;
}
}
export default (props) => (
<Django
{...props}
params={useSearchParams()}
/>
);函数组件写法：
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
const Django = () => {
let [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('age'));
return (<h1>Django</h1>);
}
export default Django;import {Routes, Route, Navigate} from 'react-router-dom';<Route path="*" element={ <Navigate replace to="/404" /> } />