Маршрутизация для указания c части другого компонента в React

Question

У меня проблема с маршрутизацией к определенной c части другого функционального компонента в React. Я объявил Route в компоненте Main и Link вокруг того места, откуда я хочу перенаправить ... это выглядит так ... Основная функция получает:

<Switch>
    <Route exact path='/news/:eyof' component={News} />
    <Route exact path='/news/:svetsko' component={News} />
    <Route exact path='/news' component={News} />
</Switch>

И я определил в другом функциональном компоненте:

<div className="card">
  <Link to="/news/:svetsko">
    <div className="card-header">
      <h3>Artistic gymnastics world championship</h3>
     </div>
   </Link>
</div>

Итак, нажав на эту ссылку, мне нужно перенаправиться на страницу новостей класса "svetsko", чтобы я мог прочитать об этих новостях ... Все новости находятся в контейнерах на одной странице ....

Answer 1

Вам нужен только один маршрут, например

<Switch>
    <Route exact path='/news' component={News} />
</Switch>

. Вы можете указать ссылку, например

 <Link to={{
  pathname: '/news',
  state: { news : yourNewsName } // you can pass svetsko here
}}> 

 <div className="card-header">
  <h3>Artistic gymnastics world championship</h3>
 </div>

</Link>

. Вы можете получить доступ к этому состоянию на своей странице новостей, например

<div>{  props.location.state !== undefined ? props.location.state.news : '' }</div>

* 1009. * После получения вашего типа новостей, например, eyof:

Шаг 1:

   you can create on functional component which takes argument as your
 data and return your new post jsx with your data.

Шаг 2:

   So,when you get your eyof in your page then you are going to call 
this function and pass your data related to your eyof and that function 
return your new post to your page.

Answer 2

Хорошо, я нашел одну действительно хорошую библиотеку в качестве решения, она называется response-scroll, и у нее есть возможность заключить нужную ссылку в ранее определенную ссылку прокрутки и обернуть компонент, который вы хотите связать, как спецификацию c часть страницы с Элементом с идентификатором, который вы дали для ссылки прокрутки в качестве параметра ... Попробуйте, если вам это как-то нужно.

Answer 3

Попробуйте что-то подобное в вашем компоненте:

let { scrollToSection } = useParams();
svetskoRef = React.createRef();

useParams () позволяет вам получить доступ: svetsko. Когда компонент загружается, вы можете использовать scrollToSection для перемещения между различными частями страницы. ScrollRef используется для доступа к элементу DOM, к которому вы хотите перейти.

window.scrollTo(0,scrollRef.offsetTop)

Разметка будет выглядеть примерно так:

<div className="card" ref="svetskoRef">
  <Link to="/news/:svetsko">
    <div className="card-header">
      <h3>Artistic gymnastics world championship</h3>
     </div>
   </Link>
</div>