Reactjs – React Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

I am new to React and I am getting this error and not sure how to fix this

I need to add a link to app.js to navigate to Matter.js

I run Python flask in the backend and read the data from that server in the front-end

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;

I’ve wrapped the App component with Router, and I’ve used the Switch component to handle routing. Each Route is inside the Switch component, and the Link components are used to navigate between routes.

Then I realize that the Switch component does not exist in react-router-dom. Instead, I use conditional rendering with the Route component to achieve the desired behavior. I removed the Switch component and used the Route component directly. Each Route component has a path prop and a component prop. Neither of them work unfortunately.

Any help would be greatly appreciated