Блог

Главная - Вопросы по программированию - Не понимаю, почему дубликаты данных копируются в мой URL-адрес в компоненте react

Не понимаю, почему дубликаты данных копируются в мой URL-адрес в компоненте react

#reactjs #duplicates

Вопрос:

В моем 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://stackoverflow.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 компоненте я создаю Link для url 

 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 дублируется много раз. Я не знаю, почему это происходит.

Комментарии:

1. что именно вы имеете в виду под my Link has a path of multiple google urls этим ?

2. Это произошло, когда вы пытались нажать на него несколько раз?

3. ну, в основном у него есть URL-адрес, который является домашней страницей URL для Google, но он дублируется, поэтому вместо ex. google.com это так google.comgoogle.comgoogle.com и т.д. И нет, это просто там, когда я сначала визуализирую страницу, и я вижу это в своем DOM

4. react-router-dom Link компоненты ссылаются только на внутренние URL-адреса, т. е. ссылки на ваше приложение. Внешние URL-адреса должны использовать <a /> тег привязки HTML.

Ответ №1:

Компонент Link предназначен для обеспечения декларативной, доступной навигации по вашему приложению

Если вы используете Link компонент для внешнего URL-адреса, он будет продолжать добавлять ваш URL-адрес к предыдущим.

Для перехода по внешнему URL-адресу я бы посоветовал вам вместо этого использовать собственный HTML-тег:

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

Рабочий пример:

Редактировать эластичный-борг-kfbvv

Комментарии:

1. Но как получилось, что он к нему прилагается? Я понимаю, что могу просто использовать a тег, но почему он дублируется, кроме того, что это внешний URL-адрес, и что я не должен использовать ссылку для этого

2. Компонент <Link/> имеет определенный механизм для внутренней навигации, если он действует так же, как обычный тег <Link/><a/>… он явно избыточен.

3. При всем уважении, ответ на высказывание <Link/> «ведет себя по-другому» для <a/> тега является избыточным. Я не понимаю, почему это дублируется. Ответ не объясняет, почему URL google.com -адрес может стать google.comgoogle.comgoogle.com .

4.Вот цитата с сайта react-router A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.

Метки: ,