Блог

Главная - Вопросы по программированию - В приложении React ссылка на тег не перенаправляет на другой веб-сайт

В приложении React ссылка на тег не перенаправляет на другой веб-сайт

#reactjs

#reactjs

Вопрос:

Я новичок в React. Я создаю карту с маркерами, которая будет иметь всплывающее окно, содержащее ссылку, которая после нажатия перенаправит на другой веб-сайт. Я использую подробнее, однако, когда я нажимаю на него, ничего не происходит. Однако я вижу ссылку на веб-сайт перенаправления внизу. Я использую www.google.com в качестве примера. Я пытаюсь все это в localhost. Вот фрагмент из моего кода.

 function App() {

    const [viewport, setViewport] = useState({
      latitude: 40.68313619450496,
      longitude:-73.98128935812457,
      width: "100vw",
      height: "100vh",
      zoom: 10
    });

    const[selectedField, setSelectedField] = useState(null);

    useEffect(() => {
      const listener = e => {
        if (e.key === "Escape") {
          setSelectedField(null);
        }
      };
      window.addEventListener("keydown", listener);
    }, []);
    return (
     <div>
      <ReactMapGl
        {...viewport}
        mapboxApiAccessToken="***"
        mapStyle="mapbox://styles/valram/ckf2tl39x01hi19jwu9e8alzp"
        onViewportChange={viewport => {
          setViewport(viewport);
       }}
       >
        {fieldData.map((field) => (
          <Marker
            key={field.field_id}
            latitude={field.coordinates[0]}
            longitude={field.coordinates[1]}
          >
           <button
             className="marker-btn"
             onClick={(e) => {
              e.preventDefault();
              setSelectedField(field);
            }}
           >
             <img src= "/ball.png" alt="field icon" />
           </button>
          </Marker>
        ))}

        {selectedField ? (
          <Popup
            latitude={selectedField.coordinates[0]}
            longitude={selectedField.coordinates[1]}
            onClose={() => {
              setSelectedField(null);
            }}
          >
            <div>
              <h2>{selectedField.name}</h2>
              <p>{selectedField.address}</p>
              <img width={240} src={selectedField.image} />
              <a href="https://www.google.com/"> see more </a>

            </div>
          </Popup>
          ) : null}
        }
      </ReactMapGl>
     </div>
    );
}

export default App;

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

1. Вы хотите перенаправить на другую страницу того же сайта или на внешний сайт?

2. Таким образом, мы не можем вам помочь. <a> работает именно так. Я думаю, что переменная, которую вы присваиваете атрибуту href, вероятно, не определена, или ссылка разорвана. Нам понадобится конкретный пример, из которого вы получаете эту ссылку. Определено ли selectedField.link?? Вам нужно будет сделать <a href={selectedField.link} > Нажмите на меня </a>

3. замените привязку на div и поместите обработчик щелчка

4. Это для внешнего сайта. На данный момент я использую домашнюю страницу Google в качестве внешнего сайта. Я настроил фиктивный файл json, который имеет свойство link . Использование <a href={selectedField.link}> подробнее </a> не сработало. Я опубликую свой полный app.js код.

5. В href есть тип, вы забыли цитату <a href=» google.com > подробнее </a> -> <a href=» google.com «> посмотреть больше </a>

Метки: