React.js中Eco-News页面跳转功能实现求助

问题根源 #

当前代码存在3个核心错误导致跳转失败：

• Link组件的to属性使用了反斜杠\News，React Router要求路径使用正斜杠，且通常采用小写规范
• 外层Link内部嵌套了原生<a>标签，两个跳转元素冲突，浏览器优先响应原生a标签的错误路径/News.js
• 未确保路由配置中对应路径已映射到News组件

修复步骤 #

1. 修正路由路径格式：将Link的to属性改为符合规范的正斜杠路径，比如/news/list（匹配「首页 > 新闻 > 新闻列表页面」的层级）
2. 移除冲突的原生a标签：直接保留文本“Eco-News”，让外层Link统一处理跳转逻辑
3. 同步路由配置：在项目路由文件中添加对应路径的路由规则，映射到News组件

修正后的重点代码段 #

<div className="menuDiv">
    <h3 className="divTitle">
        NEWS
    </h3>
    <ul className="menuLists grid">
        <li className="listItem">
            <Link to="/news/list" className="menuLink flex">
                <TfiWorld className="icon" />
                <span className="smallText">
                    Eco-News
                </span>
            </Link>
        </li>
    </ul>
</div>

完整修正后的Sidebar组件代码 #

import React from "react";
import './sidebar.css';
import { Link } from 'react-router-dom'

// Imported Images ==============>
import logo from '../../Assets/logo.png';

// Imported icons ===============>
import {IoMdSpeedometer} from 'react-icons/io';
import {TfiWorld} from 'react-icons/tfi';
import {BsQuestionCircle} from 'react-icons/bs'

const Sidebar = () => {
    return (
        <div className="sideBar grid">
            <div className="logoDiv flex">
                <img src={logo} alt="World Space Logo" /> 
                <h2>World Space.</h2>
            </div>

            <div className="menuDiv">
                <h3 className="divTitle">
                    CONSUMPTION OVERVIEW
                </h3>
                <ul className="menuLists grid">
                    <li className="listItem">
                        <Link to="/readout" className="menuLink flex">
                            <IoMdSpeedometer className="icon" />
                            <span className="smallText">
                                Readout
                            </span>
                        </Link>
                    </li>

                    <li className="listItem">
                        <Link to="/driven-equivalent" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Driven Equivalent
                            </span>
                        </Link>
                    </li>

                    <li className="listItem">
                        <Link to="/efficiency-score" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Efficiency Score
                            </span>
                        </Link>
                    </li>
                </ul>
            </div>
{/* This is the tab for the Eco news, please update the necessary fonts and spacing */}
            <div className="menuDiv">
                <h3 className="divTitle">
                    NEWS
                </h3>
                <ul className="menuLists grid">
                    <li className="listItem">
                        <Link to="/news/list" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Eco-News
                            </span>
                        </Link>
                    </li>
                </ul>
            </div>

            <div className="settingsDiv">
                <h3 className="divTitle">
                    SETTINGS
                </h3>
                <ul className="menuLists grid">
                    <li className="listItem">
                        <Link to="/dashboard" className="menuLink flex">
                            <IoMdSpeedometer className="icon" />
                            <span className="smallText">
                                Dashboard
                            </span>
                        </Link>
                    </li>

                    <li className="listItem">
                        <Link to="/consumption-overview" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Consumption Overview
                            </span>
                        </Link>
                    </li>

                    <li className="listItem">
                        <Link to="/goals" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Goals
                            </span>
                        </Link>
                    </li>

                    <li className="listItem">
                        <Link to="/achievements" className="menuLink flex">
                            <TfiWorld className="icon" />
                            <span className="smallText">
                                Achievements
                            </span>
                        </Link>
                    </li>

                </ul>
            </div>

            <div className="sideBarCard">
                <BsQuestionCircle className="icon" />
                <div className="cardContent">
                    <h3>Help Center</h3>
                    {/*<p>Having trouble in World Space, please contact us.</p>
                    <button className="btn">Go to help center</button>*/}
                </div>
            </div>
        </div>
    );
}

export default Sidebar;

路由配置示例（需同步修改） #

在项目的路由配置文件（如App.js或Routes.js）中添加如下规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import News from "../news section/News";
// 导入其他组件...

function App() {
  return (
    <Router>
      <Routes>
        {/* 首页路由 */}
        <Route path="/" element={<Home />} />
        {/* 新闻列表路由 */}
        <Route path="/news/list" element={<News />} />
        {/* 其他路由规则... */}
      </Routes>
    </Router>
  );
}

验证要点 #

• 确保所有导航链接都使用react-router-dom的Link组件，而非原生<a>标签
• 检查路由路径大小写统一（推荐全小写，用连字符分隔）
• 测试跳转：点击Eco-News链接应正确加载News组件，路径显示为/news/list

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