反应错误：<Route>只能用作<Routes>元素的子元素，从不直接渲染。请将您的 <Route> 包裹在 <Routes>

Question

我是 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 组件来处理路由。每个路线都位于 Switch 组件内，而 Link 组件用于在路线之间导航。

然后我意识到react-router-dom中不存在Switch组件。相反，我使用 Route 组件的条件渲染来实现所需的行为。我去掉了Switch组件，直接使用Route组件。每个 Route 组件都有一个 path 属性和一个 component 属性。不幸的是，它们都不起作用。

任何帮助将不胜感激

Answer 1

我遵循了下面的这个问题并对我的代码进行了一些更改

错误“错误：A 只能用作 元素的子元素”

但也没有成功。同样的错误仍然存在

 import { BrowserRouter, Routes, Route} from 'react-router-dom';



 return (
    <BrowserRouter>
   
<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>

    </BrowserRouter>
    
  );
}

export default App;