React开发流程小记 -react-router-dom+ react-redux Redux Toolkit + axios

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store'; // 假设你已经创建了Redux Toolkit的store
import axios from 'axios';
 
// 假设你有以下组件
import HomePage from './HomePage';
import LoginPage from './LoginPage';
 
// 创建axios实例并配置基础URL
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 在全局作用域设置axios实例，以便在任何组件中都可以使用
global.axiosInstance = axiosInstance;
 
// 应用的根组件
const App = () => (
  <Provider store={store}>
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </Router>
  </Provider>
);
 
export default App;

这个代码实例展示了如何在React应用中集成react-router-dom用于前端路由，react-redux用于状态管理，以及Redux Toolkit的store。同时，axios库被用来处理HTTP请求。代码中创建了axios实例并设置了基础URL，然后将其导出到全局作用域，以便在应用的任何部分都能使用。最后，定义了根组件App，它包含了Router和Provider，这是React应用中常见的模式。