В чем ошибка моего роутинга?

Question

[webjun]

Приветствую, делаю обычное SPA в целях обучения и в консоли вылетает ошибка, подозреваю что дело в роутинге ..
Структура моего App.js:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Articles from "./components/Articles/Articles.jsx";
import About from "./components/About/About.jsx";
import Header from "./components/Header/Header.jsx";
import Pricing from "./components/Pricing/Pricing.jsx";
import { NotFound } from "./NotFound.jsx";
import { Dashboard } from "./components/Dashboard/Dashboard.jsx";
import { Login } from "./components/Buttons/Login.jsx";
import { Signup } from "./components/Buttons/Signup.jsx";

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Articles />} />
          <Route path="/about" element={<About />} />
          <Route path="/pricing" element={<Pricing />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="*" element={<NotFound />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

и в консоли выдает такую ошибку :

В компоненте где есть списки прописан ключ

Answer 1

[webjun]

<li key={menu.idx}> исправил на <li key={idx}>

Answer 2

[Alexandroppolus]

Посмотри ещё раз компонент Header. Реакт уверяет, что там нет ключа у элементов li. Либо он есть, но не уникальный

Comments

[webjun]

Лишке задал..

import React from "react";
import logoImage from "../../assets/img/logoTest.svg";
import { menu } from "./menu";
import styles from "./Header.module.scss";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div className={styles.header}>
      <div className={styles.logo}>
        <img src={logoImage} alt="logo_eth" height="60" />
      </div>
      <div className={styles.wrapper}>
        <ul className={styles.menu}>
          {menu.map((item, idx) => (
            <li key={menu.idx}>
              <Link to={item.link}>{item.title}</Link>
            </li>
          ))}
        </ul>
        <div className={styles.buttons}>
          <button className={styles.loginButton}>
            <Link to="/login" style={{ textDecoration: "none" }}>
              Login
            </Link>
          </button>
          <button className={styles.signupButton}>
            <Link to="/signup" style={{ textDecoration: "none" }}>
              Sign up
            </Link>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Header;

[Alexandroppolus]

webjun, попробуй отрефрешить страницу, возможно это старая запись в консоли из-за хотрелодинга