React Router V6配置异常：React电商应用路由无渲染排查

问题诊断 #

你的index.js完全没问题，没有导入遗漏或配置错误。问题出在App.js的路由配置上，两个核心原因导致页面无内容渲染：

1. 嵌套路由缺少<Outlet />占位符：React Router V6中，嵌套路由的父组件必须通过<Outlet />指定子路由内容的渲染位置，你的Root组件里没有这个，所以子路由（Home/Cart等）的内容根本无法显示。
2. 根路径无默认渲染内容：当前访问根路径/时，只会显示Root里的Link，不会自动渲染Home页面，同时访问/home等子路径时，因为没有Outlet，子组件也不会加载。

修复方案 #

步骤1：导入<Outlet />

在react-router-dom的导入列表中添加Outlet：

import {
  RouterProvider,
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  Link,
  Outlet // 新增这行
} from 'react-router-dom';

步骤2：修改Root组件，添加<Outlet />

将Outlet加入Root的JSX结构，子路由内容会在这个位置渲染：

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
      <Link to="/cart" style={{ marginLeft: '10px' }}>Cart</Link>
      <Link to="/product-details" style={{ marginLeft: '10px' }}>Product Details</Link>
      <Outlet /> {/* 子路由内容的渲染占位符 */}
    </>
  );
};

步骤3：配置根路由的默认子路由

给根路由添加index属性的子路由，访问/时会默认渲染Home页面：

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route index element={<Home />} /> {/* 根路径默认渲染Home */}
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
    </Route>
  )
)

如果需要保留/home访问路径，可以同时添加<Route path="home" element={<Home />} />，这样/和/home都会显示Home内容。

完整修改后的App.js代码 #

import React from 'react';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import {
  RouterProvider,
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  Link,
  Outlet
} from 'react-router-dom';

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
      <Link to="/cart" style={{ marginLeft: '10px' }}>Cart</Link>
      <Link to="/product-details" style={{ marginLeft: '10px' }}>Product Details</Link>
      <Outlet />
    </>
  );
};

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route index element={<Home />} />
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
    </Route>
  )
)

function App() {
  return <RouterProvider router={appRouter} />;
}

export default App;

验证 #

启动项目后，访问/会看到导航链接和Home页面内容；访问/cart或/product-details时，对应页面内容会在导航下方渲染，问题解决。

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