React路由错误修复及页面跳转功能实现求助

核心问题原因 #

你使用的是react-router-dom v6版本，该版本已移除Switch组件，改用Routes作为路由容器，所有Route必须作为Routes的直接子元素，不能单独渲染。

具体修改步骤 #

1. 在App.js中导入Routes组件，移除无用的Switch导入
2. 将所有Route组件包裹在Routes标签内部
3. 修复Matters.js的组件命名与循环导入问题（当前Matters.js存在组件命名错误、循环导入import ActionCount from './Matters'的问题）

修改后的App.js代码 #

import React, { useEffect, useState } from 'react';
import './App.css';
// 导入Routes，移除Switch
import { Link, BrowserRouter as Router, Route, Routes } 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)

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

    fetchData();
  }, []);

  const processAndLinkData = (data) => {
    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),
    }));

    return processedData;
  };

  return (
    <Router>
      <div className="App">
        <h1>Linked Data Display</h1>
        <Link to="/Matters" >Matter Details</Link>
        
        {/* 用Routes包裹所有Route组件 */}
        <Routes>
          <Route path='/Matters' element={<ActionCount />} />
          {/* 添加首页路由，默认显示数据列表 */}
          <Route path='/' element={
            <>
              {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>
                </div>
              ))}
            </>
          } />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

修改后的Matters.js代码 #

import React, { useEffect, useState } from 'react';
import './App.css';
// 仅导入需要的Link，无需重复导入Router/Route
import { Link } from 'react-router-dom';

// 组件名改为ActionCount，与导出名保持一致
function ActionCount() {
  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)
        const processedData = processAndLinkData(data);
        console.log(processedData)
        setLinkedData(processedData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, []);

  const processAndLinkData = (data) => {
    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),
    }));

    return processedData;
  };

  return (
    <div className="App">
      <h1>Matter Details</h1>
      {/* 添加返回首页的链接 */}
      <Link to="/" >Back to Home</Link>
      
      {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>
        </div>
      ))}
    </div>
  );
}

export default ActionCount;

额外说明 #

• 路由容器必须使用Routes，每个Route的path和element属性是v6版本的标准写法
• 整个应用只需在根组件（App.js）中包裹一次Router，子组件无需重复包裹
• 修复了Matters.js中的循环导入问题，确保组件名与导出名一致

内容的提问来源于stack exchange，提问作者Elevature-Developer