Reactjs React 错误： 只能用作 元素的子元素，从不直接渲染.请将您的 包裹在 中

我的react 是新的，我收到这个错误，不确定如何修复它

我需要添加到app.js的链接才能导航到Matter.js

我在后端运行Python flASK，并在前端从该服务器读取数据

App.js个

import React, { useEffect, useState } from 'react';
import './App.css';
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ActionCount from './Matters';


function App() {
  const [linkedData, setLinkedData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:5000/actions', {
          headers: {
            'Accept': 'application/json'
          }
        });
        const data = await response.json();

        console.log(data)

        // Process and link data here
        const processedData = processAndLinkData(data);

        console.log(processedData)


        setLinkedData(processedData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, []);

  const processAndLinkData = (data) => {
    // Process and link your data here

    const processedData = data['actions'].map(action => ({
      id: action.id,
      name: action.name,
      createdTimestamp: action.createdTimestamp,
      modifiedTimestamp: action.modifiedTimestamp,
      lastAccessTimestamp: action.lastAccessTimestamp,
      actionType: data.linked.actiontypes.find(p => p.id == action.links.actionType),
      primaryParticipants: action.links.primaryParticipants?.map(participantId => {
        const participant = data.linked.participants.find(p => p.id == participantId);
        return {
          firstName: participant?.firstName,
          lastName: participant?.lastName,
        };
      }) || [],

      assignedTo: data.linked.participants.find(p => p.id == action.links.assignedTo),

      step: data.linked.steps.find(p => p.id == action.links.step),

    

      // You can access other fields from the 'links' object as needed
    }));

    return processedData;
  };

  return (
    <Router>
   
<div className="App">
      <h1>Linked Data Display</h1>

      
      <Link to="/Matters" >Matter Details</Link>
      

  
        <Route path='/Matters' element={<ActionCount />} />
      

     



      {linkedData.map(data => (
        <div key={data.id}>
          <h2>Matter ID: {data.id}</h2>
         <p>Matter Type: {data.actionType.name}</p>
         <p>Workflow Step: {data.step.stepName}</p>
          <p>Matter Name: {data.name}</p>
          <p>Date Created : {data.createdTimestamp}</p>
          <p>Date Modified : {data.modifiedTimestamp}</p>
          <p>Last Accessed: {data.lastAccessTimestamp}</p>
          
          <p>Client Names:</p>
          <ul>
            {data.primaryParticipants.map((participant, index) => (
              <li key={index}>
                {participant.firstName} {participant.lastName}
              </li>
            ))}
          </ul>

          <p>Assigned to: {data.assignedTo.firstName} {data.assignedTo.lastName}</p>

         
              
          {/* You can add more displayed data here */}
        </div>
      ))}
    </div>

    </Router>
    
  );
}

export default App;

Matters.js个

import React, { useEffect, useState } from 'react';
import './App.css';
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ActionCount from './Matters';


function App() {
  const [linkedData, setLinkedData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:5000/actions', {
          headers: {
            'Accept': 'application/json'
          }
        });
        const data = await response.json();

        console.log(data)

        // Process and link data here
        const processedData = processAndLinkData(data);

        console.log(processedData)


        setLinkedData(processedData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, []);

  const processAndLinkData = (data) => {
    // Process and link your data here

    const processedData = data['actions'].map(action => ({
      id: action.id,
      name: action.name,
      createdTimestamp: action.createdTimestamp,
      modifiedTimestamp: action.modifiedTimestamp,
      lastAccessTimestamp: action.lastAccessTimestamp,
      actionType: data.linked.actiontypes.find(p => p.id == action.links.actionType),
      primaryParticipants: action.links.primaryParticipants?.map(participantId => {
        const participant = data.linked.participants.find(p => p.id == participantId);
        return {
          firstName: participant?.firstName,
          lastName: participant?.lastName,
        };
      }) || [],

      assignedTo: data.linked.participants.find(p => p.id == action.links.assignedTo),

      step: data.linked.steps.find(p => p.id == action.links.step),

    

      // You can access other fields from the 'links' object as needed
    }));

    return processedData;
  };

  return (
    <Router>
   
<div className="App">
      <h1>Linked Data Display</h1>

      
      <Link to="/Matters" >Matter Details</Link>
      

  
        <Route path='/Matters' element={<ActionCount />} />
      

     



      {linkedData.map(data => (
        <div key={data.id}>
          <h2>Matter ID: {data.id}</h2>
         <p>Matter Type: {data.actionType.name}</p>
         <p>Workflow Step: {data.step.stepName}</p>
          <p>Matter Name: {data.name}</p>
          <p>Date Created : {data.createdTimestamp}</p>
          <p>Date Modified : {data.modifiedTimestamp}</p>
          <p>Last Accessed: {data.lastAccessTimestamp}</p>
          
          <p>Client Names:</p>
          <ul>
            {data.primaryParticipants.map((participant, index) => (
              <li key={index}>
                {participant.firstName} {participant.lastName}
              </li>
            ))}
          </ul>

          <p>Assigned to: {data.assignedTo.firstName} {data.assignedTo.lastName}</p>

         
              
          {/* You can add more displayed data here */}
        </div>
      ))}
    </div>

    </Router>
    
  );
}

export default App;

我已经用Router包装了App组件，并使用Switch组件来处理路由.每条路由都在交换机组件内，链路组件用于在路由之间导航.

然后，我意识到Reaction-Router-Dom中不存在Switch组件.相反，我将条件呈现与路由组件结合使用，以实现所需的行为.我删除了Switch组件，直接使用了Route组件.每个布线组件都有一个路径props 和一个组件props .不幸的是，这两种方法都不奏效.

如有任何帮助，将不胜感激