React中如何实现卡片组件与AllRoles组件的路由链接？

问题说明 #

需要在React项目的Cards组件内，给Card.Footer区域添加跳转链接，点击后触发AllRoles组件中的控制台输出，但配置react-router-dom路由后页面内容消失，寻求解决办法。

错误原因分析 #

1. 路由结构错误：在Cards组件内部的卡片渲染函数中嵌套Routes/Route，甚至尝试重复包裹BrowserRouter，违反react-router-dom的路由层级规则，导致组件渲染异常。
2. AllRoles组件未返回JSX：组件必须返回有效的JSX元素，否则即使路由跳转成功，页面也会无内容，甚至引发报错。

修复步骤 #

1. 配置根路由（App.js） #

确保项目根组件正确使用BrowserRouter包裹所有路由，统一管理路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Cards from './Cards';
import AllRoles from './Roles';

function App() {
  return (
    <Router>
      <Routes>
        {/* 首页展示Cards组件 */}
        <Route path="/" element={<Cards />} />
        {/* 跳转至AllRoles组件的路由 */}
        <Route path="/roles" element={<AllRoles />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 修改Cards组件，添加正确的跳转链接 #

清理Cards组件内错误的路由代码，在Card.Footer中使用Link组件实现跳转：

import React from 'react';
import { Link } from 'react-router-dom'; // 仅保留Link导入
import { useEffect, useState } from "react";
import axios from 'axios';
import Card from 'react-bootstrap/Card';

const baseURL = "../cartas.json";

const Cards = () => {
    const [carta, setCarta] = useState([])

    useEffect(() => {
        axios
            .get(`${baseURL}`)
            .then((response) => {
                setCarta(response.data.cita);
            })
            .catch(err => { console.log(err.message) });
    }, []);

    const renderCard = (card, index) => {
        return (
            <Card className="col-1 col-md-3 w-15 mx-auto" key={index} >
                <Card.Img src={card.imagen}
                    alt={card.nombre}
                    className="py-3 px-3 mx-auto"
                    style={{ width: "12rem" }}>
                </Card.Img>
                <Card.Body>
                    <p className="card-title">{card.descripcion}</p>
                </Card.Body>
                <Card.Footer className="fs-3 py-3 px-3">
                    {/* 添加跳转至AllRoles的Link */}
                    <Link to="/roles">查看角色</Link>
                </Card.Footer>
            </Card>
        )
    }

    return (
        <div className='app row row-cols-12 gap-5 justify-content-md-center'>
            {carta.map(renderCard)}
        </div>
    )
}
export default Cards;

3. 完善AllRoles组件，确保返回JSX #

给AllRoles组件添加返回的JSX元素，同时保留控制台输出逻辑：

import React from 'react';
import { useEffect, useState } from "react";

const baseURL = "https://pokeapi.co/api/v2/pokemon/ditto";

const AllRoles = () => {
    const [roles, setRol] = useState([]);

    useEffect(() => {
        fetch(`${baseURL}`)
            .then(response => {
                console.log(response);
                return response.json();
            })
            .then(data => {
                console.log(data);
            })
            .catch((err) => {
                console.log(err.message);
            });
    }, []);
    console.log("hola");

    // 必须返回有效的JSX
    return (
        <div className="container mt-5">
            <h2>角色列表页面</h2>
        </div>
    );
}
export default AllRoles;

验证结果 #

启动项目后，点击卡片底部的"查看角色"链接，页面会跳转到/roles路径，此时浏览器控制台会输出：

• "hola"
• fetch请求的response对象
• 解析后的Pokemon数据

完全满足需求。

内容的提问来源于stack exchange，提问作者informaticoDudas