不明白为什么重复数据被复制到我的反应组件中的 url

Question

在我的 App.js（或主要组件）中，我正在渲染我的 Navbar 组件

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from './components/layout/navbar/Navbar';

import './App.css';

const App = () => {
  return (
    <Router>
      <Navbar />
    </Router>
  );
};

export default App;

在我的 Navbar 中，我正在渲染我的 NavLinks 组件并作为 props 传入 menu

import React from 'react';
import NavLinks from './NavLinks';

const menu = [
  { id: 1, label: 'Home', url: 'https://www.google.com/?client=safari' },
  { id: 2, label: 'Contact us', url: 'https://whosebug.com' },
];

const Navbar = () => {
  return (
    <nav>
      <NavLinks items={menu} />
    </nav>
  );
};

export default Navbar;

在我的 NavLinks 中，我将 items 作为道具引入，这是我们之前看到的菜单 map 通过它并作为 props url 和 label.

import React from 'react';
import NavLink from './NavLink';

const NavLinks = ({ items }) => {
  const links = items.map((item) => (
    <NavLink key={item.id} url={item.url} label={item.label} />
  ));

  return <ul>{links}</ul>;
};

export default NavLinks;

在我的 NavLink 组件中，我正在为 url

创建一个 Link

import React from 'react';
import { Link } from 'react-router-dom';

const NavLink = ({ url, label }) => {
  return (
    <li className='nav-item'>
      <Link to={url}>{label}</Link>
    </li>
  );
};

export default NavLink;

出于某种原因，我的 Link 有多个 google urls 的路径。 url 到 google 主页重复了很多次。我不知道为什么会这样。

Answer 1

Link 组件用于围绕您的应用程序提供声明性的、可访问的导航

如果您将 Link 组件用于外部 URL，这将继续将您的 URL 附加到之前的组件。

为了导航到外部 URL，我建议您改用原生 HTML 标签：

const NavLink = ({ url, label }) => {
  return (
    <li className="nav-item">
      <a href={url}>{label}</a>
    </li>
  );
};

工作示例：

不明白为什么重复数据被复制到我的反应组件中的 url

Do not understand why duplicate data is being copied into my url in react component

duplicates

reactjs

Link 组件用于围绕您的应用程序提供声明性的、可访问的导航