Привязка навигации с использованием тега <a>внутри реагирующего компонента - PullRequest
Новая
       13

Привязка навигации с использованием тега <a>внутри реагирующего компонента

0 голосов
/ 04 июня 2019

Я пытаюсь настроить привязку навигации в одном из моих компонентов страницы внутри моего приложения реагирования.

Я пытаюсь имитировать ту же функциональность, что и здесь, в draft.js где он использует подзаголовки в качестве якорей (со значком ссылки рядом с ним), что также отражается в URL.

В качестве ссылки я смотрю на http://www.tagindex.net/html/link/a_name.html

ТакЯ пошел дальше и попытался реализовать, используя атрибут name 

  <List.Item>
    <a href="#createqueryschema">Create Query Schema</a>
  </List.Item>

Тогда подзаголовок должен перейти к 

<Header>
  <a name="createqueryschema">Create Query Schema</a>
  <Header.Subheader style={{ marginTop: "20px", fontSize: "1rem" }}>
    BLAH BLAH BLAH BLAH BLAH BLAH
  </Header.Subheader>
</Header>

Я рендерил этот список и подзаголовок на странице с именем /overview, поэтому в теории, когда я нажимаю на элемент в списке, он должен перейти к подзаголовку Create Query Schema И отразить /overview#createqueryschema в URL.

Однако он пытается перейти на страницу /createqueryschema.Я не уверен, почему / как он пытается перейти на новую страницу, когда нужно просто добавить # и атрибут name.

РЕДАКТИРОВАТЬ: он также не переходит на нужный элемент

У меня есть настройки codesandbox для дальнейшего объяснения.Нажмите на документы в верхней части строки меню, и вы попадете на страницу с навигационной навигацией.Если щелкнуть любой из двух якорей в разделе Overview, соответствующий <Header> не будет прокручен до.

РЕДАКТИРОВАТЬ: ОБНОВЛЕНО для лучшего объяснения проблемы маршрутизации

У меня все еще есть проблемы с настройкой якорного элемента для навигации по той же странице.Мое приложение уже использует хэш-маршрутизатор по другой причине, поэтому моя базовая страница /home/#/ Каждая другая страница будет выглядеть следующим образом /home/#/page1 /home/#/page2

Например, я использую навигацию привязки на странице вpage2 Я создаю ссылку на именованную привязку ниже 

   <List.Item>
    <a href="#some-random-header">Random Header</a>
  </List.Item>

Затем создайте именованную привязку, используя атрибут id <Header id="some-random-header">Random Header Section</Header>

Когда я нажимаю на ссылку, онапытается перейти на новую страницу с помощью URL /home/#/some-random-header INSTEAD из /home/#/page2#some-random-header

1 Ответ

0 голосов
/ 04 июня 2019

Обычно # используется для идентификатора, однако идентификаторы не используются в React.Что вы можете сделать, это создать ссылку.Затем вы можете создать метод onClick для прокрутки до ссылки, когда ссылка нажимается

Так что вы можете попробовать что-то вроде: 

import React, { useRef } from "react";

const Component = () => {
   const myRef = useRef();
   const handleClick = () => {
      window.scrollTo(0, myRef.current.offsetTop)
   }
   return ( 
      <>
      <List.Item>
         <p onClick={handleClick}>Create Query Schema</p>
      </List.Item>
      <div name="createqueryschema" ref={myRef} >Create Query Schema</div> 
      </>
)

}
...