React Router V6使用render无内容显示，页面空白报错排查

问题场景 #

使用React Router version 6开发项目，页面包含Navbar组件，通过路由访问页面内容。点击products后页面空白无反应，控制台报错：

history.ts:487 Matched leaf route at location "/products" does not have an element or Component. 
This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

相关代码 #

App.js

import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="content">
          <Routes>       
            <Route
              path="/products"
              render={(props) => <Products sortBy="newest" {...props} />}
            />         
          </Routes>
        </div>
      </div>
    );
  }
}

export default App;

Products.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
class Products extends Component {
  state = {
    products: [
      { id: 1, name: "Product 1" },
      { id: 2, name: "Product 2" },
      { id: 3, name: "Product 3" },
    ],
  };

  render() {
    return (
      <div>
        <h1>Products</h1>
        <ul>
          {this.state.products.map((product) => (
            <li key={product.id}>
              <Link to={`/products/${product.id}`}>{product.name}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Products;

错误原因 #

React Router v6 彻底移除了Route组件的render、component属性，统一使用element属性指定路由对应的组件。代码中仍沿用v5及更早版本的render写法，导致路由无法识别要渲染的组件，因此出现空白和报错。

修复方案 #

修改App.js中的路由配置，将render替换为element，直接传入组件实例：

import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="content">
          <Routes>       
            <Route
              path="/products"
              element={<Products sortBy="newest" />}
            />         
          </Routes>
        </div>
      </div>
    );
  }
}

export default App;

补充说明 #

React Router v6中，路由组件不再自动接收history、location等props，若需使用这些内容，需通过useNavigate、useLocation等Hooks获取。当前Products组件未用到这些props，直接传入sortBy属性即可正常运行。

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