React-router-dom 渲染道具没有返回任何组件

Posted 2023-02-22

【中文标题】React-router-dom 渲染道具没有返回任何组件

【英文标题】：React-router-dom Render props isn't returning any component

【发布时间】：2022-01-12 19:43:11

【问题描述】：

我在这里使用 react-router-dom 版本 6.0.2 并且“渲染”道具不起作用，每次我到达我的 Route 标签的路径中提到的 url 时，它总是向我抛出这个错误 - “位置“/addRecipe”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致一个“空”页面。”。有人可以帮我解决这个问题吗

import './App.css';
import Home from './components/Home';
import AddRecipe from './components/AddRecipe';
import items from './data';
import React,  useState  from 'react';
import BrowserRouter as Router, Routes, Route from 'react-router-dom';

const App = () => 
  const [itemsList, setItemsList] = useState(items)
  const addRecipe = (recipeToAdd) => 
    setItemsList(itemsList.concat([recipeToAdd]));
  
  const removeItem = (itemToRemove) => 
    setItemsList(itemsList.filter(a => a!== itemToRemove))
  
  return (
    <Router>
      <Routes>
        <Route path="/addRecipe" render= (history) => 
          return (<AddRecipe onAddRecipe=(newRecipe) => 
            addRecipe(newRecipe);
            history.push('/');
             />);
          />
        </Routes>
    </Router>
  );


export default App;

【问题讨论】：

您是否正确导出AddRecipe.js 中的组件类/函数？因为我的猜测是在您发布的脚本中，AddRecipe 为空。错误消息只是由此产生的后果。

【参考方案1】：

Route 组件 API 从版本 5 到版本 6 发生了显着变化，而不是 component 和 render 道具有一个单一的 element 道具，它被传递一个 JSX 文字而不是对 React 组件的引用（通过component）或函数（通过render）。

也不再有路由道具（history、location 和 match），它们只能通过 React 钩子访问。在此 RRDv6 之上也不再直接显示 history 对象，而是将其抽象为 navigate 函数，可通过 useNavigate 钩子访问。如果AddRecipe 组件是一个函数组件，它应该直接从钩子中访问navigate。如果它不能这样做，那么解决方案是创建一个可以的包装器组件，然后使用更正的onAddRecipe 回调呈现AddRecipe 组件。

例子：

const AddRecipeWrapper = ( addRecipe ) => 
  const navigate = useNavigate();

  return (
    <AddRecipe
      onAddRecipe=(newRecipe) => 
        addRecipe(newRecipe);
        navigate('/');
      
    />
  );
;

...

const App = () => 
  const [itemsList, setItemsList] = useState(items);

  const addRecipe = (recipeToAdd) => 
    setItemsList(itemsList.concat([recipeToAdd]));
  ;

  const removeItem = (itemToRemove) => 
    setItemsList(itemsList.filter(a => a !== itemToRemove))
  ;

  return (
    <Router>
      <Routes>
        <Route
          path="/addRecipe"
          element=<AddRecipeWrapper addRecipe=addRecipe />
        />
      </Routes>
    </Router>
  );
;

【参考方案2】：

在 react-router-dom 版本 6 中，您应该为此使用 element prop。

我建议您阅读他们的document on upgrading from version 5，他们在其中解释了更改。

对于你的问题，你应该这样写：

<Route 
   path="/addRecipe" 
   element=
      <AddRecipe 
         onAddRecipe=(newRecipe) => 
           addRecipe(newRecipe);
           history.push('/');
          
      />
     
 />