import { Link } from 'react-router-dom';

About

Navigate：用于在组件中进行重定向。

import { Navigate } from 'react-router-dom';

3. 路由配置

配置路由通常涉及创建一个路由表，定义各个路由及其对应的组件。以下是一个简单的示例，展示如何在 React 应用中配置路由。

import React from 'react';

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

// 导入页面组件

import Home from './Home';

import About from './About';

import NotFound from './NotFound';

function App() {

return (

} />

} />

{/* 404 页面 */}

} />

);

}

export default App;

4. 嵌套路由 及 路由守卫、404

嵌套路由允许你在某个父路由的组件内部定义子路由。这样，你可以在父路由的页面中渲染子路由对应的内容。

import { Routes, Route, Link } from 'react-router-dom';

function Users() {

return (

);

}

function UserProfile() {

const { userId } = useParams();

return

User Profile for User ID: {userId}

}

路由守卫

路由保护可以确保只有特定条件下（例如用户登录后）才能访问某些路由。可以通过创建一个高阶组件（HOC）来实现。

function ProtectedRoute({ element, isAuthenticated }) {

return isAuthenticated ? element : ;

}

// 使用

} isAuthenticated={isLoggedIn} />} />

404 页面处理

可以使用通配符路由 * 来处理未匹配的路径，并显示 404 页面。

} />

5. 动态路由（match）

动态路由允许你在路径中使用参数，这样可以在 URL 中捕获动态值。例如，展示用户信息的页面。

} />

类组件中

使用 URL 参数，可以使用 withRouter 高阶组件来获取路由的 props，包括 match、location 和 history 对象。

使用 withRouter 获取 URL 参数

import React from 'react';

import { withRouter } from 'react-router-dom';

class UserProfile extends React.Component {

render() {

// 从 props 中获取 match 对象

const { match } = this.props;

const userId = match.params.userId; // 获取 URL 参数

return

}

}

// 使用 withRouter 将 UserProfile 包装起来

export default withRouter(UserProfile);

关键点

withRouter 是一个高阶组件，它将路由的相关信息作为 props 传递给被包装的组件。

match.params 中包含了 URL 中的动态参数，像这里的 userId。

确保在路由配置中使用 UserProfile 组件时，像这样设置路由：

} />

函数组件

直接使用 useParams 来获取 URL 参数：

import { useParams } from 'react-router-dom';

function UserProfile() {

const { userId } = useParams();

return

}

6. 获取 修改 查询字符串（location）

https://example.com/users?userId=123&userName=Alice

1. 类组件获取查询字符串参数

在类组件中，我们通常使用 withRouter 高阶组件来访问路由相关的信息，包括查询字符串。

示例代码

import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';

class QueryParamsClassComponent extends Component {

render() {

const { location } = this.props; // 从 props 中获取 location 对象

const searchParams = new URLSearchParams(location.search); // 创建 URLSearchParams 对象

// 获取具体的参数

const userId = searchParams.get('userId'); // 获取 userId 参数

const name = searchParams.get('name'); // 获取 name 参数

// searchParams。set('userId', '456'); // 修改或添加 userId 参数

// searchParams.set('name', 'Alice'); // 修改或添加 name 参数

return (

);

}

}

export default withRouter(QueryParamsClassComponent); // 使用 withRouter 包裹类组件

代码解析

引入 withRouter：首先需要引入 withRouter，它使得组件可以访问路由的 props。

访问 location 对象：在 render 方法中，从 this.props 中获取 location 对象。

使用 URLSearchParams：

new URLSearchParams(location.search) 创建一个 URLSearchParams 对象，location.search 包含查询字符串（包括 ?）。

通过 get 方法提取具体的参数值，例如 userId 和 name。

渲染参数：在组件的 JSX 中渲染这些参数。

2. 函数组件获取查询字符串参数

在函数组件中，我们可以使用 useLocation Hook 来获取路由信息，包括查询字符串。

示例代码

import React from 'react';

import { useLocation } from 'react-router-dom';

const QueryParamsFunctionComponent = () => {

const location = useLocation(); // 使用 useLocation 获取 location 对象

const searchParams = new URLSearchParams(location.search); // 创建 URLSearchParams 对象

// 获取具体的参数

const userId = searchParams.get('userId'); // 获取 userId 参数

const name = searchParams.get('name'); // 获取 name 参数

//searchParams.get('userId'); // 获取 userId 参数

//searchParams.get('name'); // 获取 name 参数

return (

);

};

export default QueryParamsFunctionComponent; // 直接导出函数组件

代码解析

引入 useLocation：引入 useLocation Hook。

调用 useLocation：在函数组件中调用 useLocation()，它返回当前路由的 location 对象。

使用 URLSearchParams：

new URLSearchParams(location.search) 创建一个 URLSearchParams 对象，用于解析查询字符串。

使用 get 方法提取需要的参数值。

渲染参数：在组件的 JSX 中渲染这些参数。

7、编程导航 history

1. history 对象的概念

历史记录：history 对象是一个 JavaScript 对象，它表示浏览器的会话历史。每当用户访问一个新的 URL 时，浏览器会将该 URL 添加到历史记录中。

导航：通过 history 对象，你可以编程式地导航到不同的页面，而不是仅仅依赖于用户点击链接。

2. history 对象的常用方法

history 对象提供了多种方法来处理导航和历史记录。以下是一些常用的方法：

push(path, [state])

功能：在历史记录栈中添加一个新的条目，导航到指定的路径。

参数：

path：要导航到的路径。

state（可选）：与新路径关联的状态对象，这个对象可以在目标页面通过 location.state 访问。

示例：

this.props.history.push('/home'); // 导航到 /home

this.props.history.push('/profile', { from: 'home' }); // 导航到 /profile，并传递状态

replace(path, [state])

功能：替换当前的历史记录条目，导航到指定的路径，而不是添加一个新的条目。

参数：同 push 方法。

示例：

this.props.history.replace('/login'); // 用 /login 替换当前的历史条目

go(n)

功能：根据历史记录栈中的位置导航。

参数：

n：要导航的相对位置（正数表示向前，负数表示向后）。

示例：

this.props.history.go(-1); // 返回到上一页

this.props.history.go(2); // 前进两页

goBack() 返回到上一页，等同于 go(-1)。

goForward() 前进到下一页，等同于 go(1)。

3. 在 React Router 中使用 history

在 React Router 中，history 对象通常是通过 withRouter 高阶组件或在函数组件中通过 useNavigate 和 useLocation Hook 访问的。

类组件使用 withRouter

import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';

class MyComponent extends Component {

handleNavigation = () => {

this.props.history.push('/home'); // 使用 history 导航

};

render() {

return Go to Home;

}

}

export default withRouter(MyComponent); // 使用 withRouter 包裹组件

函数组件使用 useNavigate

在 React Router v6 及以上版本中，推荐使用 useNavigate Hook 来获取 navigate 函数。

import React from 'react';

import { useNavigate } from 'react-router-dom';

const MyFunctionComponent = () => {

const navigate = useNavigate();

const handleNavigation = () => {

navigate('/home'); // 使用 navigate 导航

};

return Go to Home;

};

export default MyFunctionComponent;

8、子组件的路由 Outlet

// App.js

import React from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import UserProfile from './UserProfile';

import UserSettings from './UserSettings';

import UserActivity from './UserActivity';

const App = () => {

return (

}>

} />

} />

);

};

export default App;

// UserProfile.js

import React from 'react';

import { Link, Outlet } from 'react-router-dom';

const UserProfile = () => {

return (

);

};

export default UserProfile;

// UserSettings.js

import React from 'react';

const UserSettings = () => {

return

User Settings

};

export default UserSettings;

// UserActivity.js

import React from 'react';

const UserActivity = () => {

return

User Activity

};

export default UserActivity;

7、redux 集中状态管理

Redux.createStore 是 Redux 的传统方式，用于创建 Redux store。

Redux.createStore

导入 Redux:

import { createStore } from 'redux';

定义初始状态:

const initialState = {

todos: [],

};

创建 Reducer:

Reducer 是一个纯函数，接受当前状态和 action，并返回新的状态。

const todoReducer = (state = initialState, action) => {

switch (action.type) {

case 'ADD_TODO':

return { ...state, todos: [...state.todos, action.payload] };

default:

return state;

}

};

创建 Store:

使用 createStore 创建 store，并传入 reducer。

const store = createStore(todoReducer);

使用 Store:

可以使用 store.getState() 获取当前状态，使用 store.dispatch(action) 发送 action。

store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });

console.log(store.getState());

Redux Toolkit

Redux Toolkit 是官方推荐的 Redux 工具集，它简化了 Redux 的使用，包含了一些开箱即用的工具和最佳实践。使用 Redux Toolkit 可以更容易地管理状态，减少模板代码。

1. 安装

首先，安装 Redux Toolkit 和 React-Redux：

npm install @reduxjs/toolkit react-redux

2. 创建 Slice

使用 createSlice 来定义 state、reducers 和 actions。这样可以简化代码结构。

import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({

name: 'todos',

initialState: [], // 要存的state

// 使用 createSlice 创建 slice 时，定义的 reducer 函数会自动生成对应的 action creators。

reducers: {

addTodo: (state, action) => { // state中包含所有 initialState 中的数据,

state.push(action.payload); // 使用 Immer 库来处理不可变状态

},

removeTodo: (state, action) => {

return state.filter(todo => todo.id !== action.payload); // payload 包含了调用时传递的参数, 可以是对象

},

},

});

// 导出 action

export const { addTodo, removeTodo } = todosSlice.actions;

// 导出 reducer

export default todosSlice.reducer;

3. 配置 Store

使用 configureStore 来创建 store，它会自动添加 Redux DevTools 支持和中间件。

import { configureStore } from '@reduxjs/toolkit';

import todosReducer from './todosSlice';

const store = configureStore({

reducer: {

todos: todosReducer,

},

});

export default store;

4. 连接 React 和 Redux

在应用中使用 Provider 将 store 传递给组件树。

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './store';

import App from './App';

ReactDOM.render(

,

document.getElementById('root')

);

5. 使用 Redux State

在组件中使用 useSelector 和 useDispatch 来访问状态和发起 action。

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { addTodo, removeTodo } from './todosSlice';

const TodoList = () => {

const todos = useSelector(state => state.todos);

const dispatch = useDispatch();

const handleAddTodo = () => {

const text = prompt('Enter todo:');

const id = Date.now(); // 简单生成 ID

dispatch(addTodo({ id, text }));

};

const handleRemoveTodo = (id) => {

dispatch(removeTodo(id));

};

return (

);

};

export default TodoList;

6. 处理异步操作

使用 createAsyncThunk 处理异步请求。

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 异步操作示例

export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {

const response = await fetch('/api/todos');

return response.json();

});

const todosSlice = createSlice({

name: 'todos',

initialState: { items: [], status: 'idle' },

reducers: {},

extraReducers: (builder) => {

builder

.addCase(fetchTodos.fulfilled, (state, action) => {

state.items = action.payload;

});

},

});

// 导出 reducer

export default todosSlice.reducer;

8、hook

好的，我们来详细讲解一下 React Hooks，包括基本用法、常见的 Hooks 和具体的应用场景。

1、基本用法

React Hooks 是 React 16.8 引入的一种新特性，旨在让函数组件具备类组件的功能，尤其是状态管理和副作用处理。Hooks 的引入使得函数组件更加强大和灵活。

1. 使用 Hooks 的规则

只能在函数组件或自定义 Hooks 中调用。 不可以在 普通 JavaScript 函数、类组件 或者 条件语句 中调用。

调用顺序必须一致。 React 会根据调用的顺序来追踪每个 Hook 的状态。

2、常见的 Hooks

1. useState

用于在函数组件中添加状态。

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0); // count 是状态，setCount 是更新状态的函数

return (

);

}

2. useEffect

useEffect(()=> {}, 依赖项)

用于处理副作用，例如数据获取、订阅等。

import React, { useState, useEffect } from 'react';

function DataFetcher() {

const [data, setData] = useState(null);

useEffect(() => {

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => setData(data));

// 可选的清理函数

return () => {

// 例如取消订阅

};

}, []); // 依赖数组，空数组意味着仅在组件挂载时执行一次

return

}

3. useContext

用于在组件之间共享状态，避免逐层传递 props。

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {

const theme = useContext(ThemeContext);

return

}

function App() {

return (

);

}

4. useReducer

用于在复杂状态逻辑中管理状态，相比 useState 更加灵活。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {

switch (action.type) {

case 'increment':

return { count: state.count + 1 };

case 'decrement':

return { count: state.count - 1 };

default:

throw new Error();

}

}

function Counter() {

const [state, dispatch] = useReducer(reducer, initialState);

return (

);

}

5. 自定义 Hooks

你可以创建自己的 Hooks，复用逻辑。

import { useState, useEffect } from 'react';

function useFetch(url) {

const [data, setData] = useState(null);

const [error, setError] = useState(null);

useEffect(() => {

fetch(url)

.then(response => response.json())

.then(setData)

.catch(setError);

}, [url]);

return { data, error };

}

// 使用自定义 Hook

function DataFetcher({ url }) {

const { data, error } = useFetch(url);

if (error) return

return

}

3、具体的应用场景

数据获取: 使用 useEffect 和 useState 来从 API 获取数据。

表单管理: 使用 useState 来管理输入框的状态，并处理提交。

动画: 使用 useEffect 来设置动画的入场和离场。

订阅: 在 useEffect 中添加订阅，返回一个清理函数以取消订阅。

组合逻辑: 使用自定义 Hooks 来提取组件之间共享的逻辑。