React Router v6.3：如何在index.js中使用App.js的props为组件传参？

你没法直接在index.js里使用App.js的props，因为App是被渲染的组件，它的内部状态和props仅在组件自身的渲染周期内可用，入口文件index.js无法直接获取这些内部变量。下面是几种可行的解决方案：

方案1：将路由配置移到App.js中 #

把Cart的路由嵌套在App组件内部，这样App里的cart状态就能直接作为props传给Cart组件，这是最直接的方式。

修改后的index.js： #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './src/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

App.js中的路由配置： #

import { Routes, Route, Link } from 'react-router-dom';
import Cart from './Cart';
import { useState } from 'react';

function App() {
  // 假设cart是App组件内部的状态
  const [cart, setCart] = useState([]);

  return (
    <div className="App">
      <nav>
        <Link to="/">首页</Link>
        <Link to="/cart">购物车</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1>首页内容</h1>} />
        <Route path="/cart" element={<Cart cart={cart} />} />
      </Routes>
    </div>
  );
}

export default App;

方案2：使用React Context共享cart数据 #

如果你的项目中多个组件都需要访问cart数据，推荐用Context来全局共享，这样不管Cart组件在路由结构的哪个位置，都能直接获取cart。

1. 创建CartContext.js： #

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

const CartContext = createContext();

// 提供Cart数据的Provider组件
export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

// 自定义Hook，简化Context的使用
export function useCart() {
  return useContext(CartContext);
}

2. 修改index.js，包裹CartProvider： #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { CartProvider } from './src/CartContext';
import App from './src/App';
import Cart from './src/Cart';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <CartProvider>
    <Router>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </Router>
  </CartProvider>
);

3. 在Cart组件中获取cart数据： #

import { useCart } from './CartContext';

function Cart() {
  const { cart } = useCart();

  return (
    <div>
      <h2>购物车</h2>
      {cart.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        cart.map(item => <div key={item.id}>{item.name}</div>)
      )}
    </div>
  );
}

export default Cart;

方案3：将cart状态提升到index.js（不推荐） #

虽然可以把cart状态移到index.js中，但这样会让入口文件变得臃肿，不符合组件化的设计原则，仅作为备选方案：

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './src/App';
import Cart from './src/Cart';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    {/* 把cart状态定义在index.js中 */}
    {(() => {
      const [cart, setCart] = useState([]);
      return (
        <Routes>
          <Route path="/" element={<App cart={cart} setCart={setCart} />} />
          <Route path="/cart" element={<Cart cart={cart} />} />
        </Routes>
      );
    })()}
  </Router>
);

内容的提问来源于stack exchange，提问作者Abdullahi Olateju