如何在Route中渲染Props？解决路由无匹配元素报错问题

错误原因 #

你遇到的报错核心是React Router v6彻底弃用了render/component这类旧版路由渲染属性，仅支持element属性定义路由组件。你之前的render写法是v5及更早版本的语法，在v6中完全不生效；如果替换element后仍报错，大概率是写法不符合v6的规范。

修复步骤 #

1. 确认React Router版本 #

先检查项目依赖版本，确保是v6：

npm list react-router-dom

如果是v6，按下面的方案修改；如果是v5及以下，要么改用v5的语法，要么升级到v6并适配新写法。

2. 正确使用element属性 #

场景1：ShoppingCart是函数组件

直接在element中传入组件实例，传递product属性即可。路由相关的导航、参数等，组件内部可以通过useNavigate/useParams等hooks获取：

<Route path="/cart" element={<ShoppingCart product={this.state.product} />} />

组件内部获取路由能力示例：

// ShoppingCart.jsx
import { useNavigate } from 'react-router-dom';

function ShoppingCart({ product }) {
  const navigate = useNavigate();
  // 用navigate实现跳转等操作
  return <div>{/* 组件内容 */}</div>;
}

场景2：ShoppingCart是类组件

类组件无法直接使用React Router的hooks，可通过函数组件包装传递所需的路由方法：

// 路由所在的类组件
import React from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import ShoppingCart from './ShoppingCart';

class App extends React.Component {
  state = {
    product: { /* 你的产品数据 */ }
  };

  render() {
    const { product } = this.state;
    // 用函数组件包装，传递navigate和product
    const CartWrapper = () => {
      const navigate = useNavigate();
      return <ShoppingCart product={product} navigate={navigate} />;
    };

    return (
      <Routes>
        <Route path="/cart" element={<CartWrapper />} />
      </Routes>
    );
  }
}

3. 常见坑点排查 #

• 必须将路由嵌套在<Routes>组件内（v6用<Routes>替代了旧版的<Switch>）
• element属性的值必须是JSX元素（即<Component />形式，不能只传组件引用）
• 不要在v6中尝试混用v5的render函数写法，完全改用element

完整可运行示例 #

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ShoppingCart from './ShoppingCart';

class App extends React.Component {
  state = {
    product: { id: 1, name: '示例商品', price: 99 }
  };

  render() {
    const { product } = this.state;
    return (
      <Router>
        <Routes>
          <Route path="/cart" element={<ShoppingCart product={product} />} />
        </Routes>
      </Router>
    );
  }
}

export default App;

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