React路由报错：根路径匹配无元素导致空白页问题求助

问题原因 #

你的路由代码采用了React Router v5的语法，但实际运行环境是React Router v6。v6版本对<Route>组件做了核心变更：

• 不再支持render和exact属性，必须通过element属性指定要渲染的内容
• v6默认开启精确匹配，无需手动添加exact
• 不再通过props传递history这类路由对象，页面跳转需使用<Navigate>组件

因为你的路由没有设置element属性，匹配到路径后无内容可渲染，所以出现页面空白并抛出该错误。

修复步骤 #

• 把所有路由的render属性替换为element，直接传入要渲染的JSX元素
• 删除所有exact属性
• 调整跳转逻辑：用<Navigate>组件替代props.history.push，将判断逻辑整合到element的JSX中

修改后的代码示例 #

<>
  <Routes>
    <Route
      path="/"
      element={
        <>
          <Hero merchant={merchant} />
          {this.renderCartNav()}
          {isCartVisible &&
            <Cart
              cart={cart}
              onUpdateCartQty={this.handleUpdateCartQty}
              onRemoveFromCart={this.handleRemoveFromCart}
              onEmptyCart={this.handleEmptyCart}
            />
          }
          <ProductsList
            products={products}
            onAddToCart={this.handleAddToCart}
          />
        </>
      }
    />
    <Route
      path="/checkout"
      element={
        <Checkout
          cart={cart}
          onCaptureCheckout={this.handleCaptureCheckout}
        />
      }
    />
    <Route
      path="/confirmation"
      element={
        !order ? <Navigate to="/" /> : (
          <Confirmation
            order={order}
            onBackToHome={() => window.localStorage.removeItem('order_receipt')}
          />
        )
      }
    />
  </Routes>
</>
);
}
};

补充说明：如果组件需要路由参数或导航方法，可在组件内部使用useNavigate、useParams等hooks获取，v6不再通过props传递这类路由对象。

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