Routing to specific part of other component in Rea

Question

I have a problem with routing to a specific part of another functional component in React. I have declared Route in Main component and Link around the place where I want to redirect from... it looks like this... The main function gets:

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

And I defined in other functional component:

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

So by clicking on this link, I need to get redirected to News page class "svetsko" so I can read about that news... All news are in containers in same page....

Answer 1

You need only one route like

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

you can give link like

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

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

</Link>

You can access this state in your News Page like

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

After getting your news type like eyof :

Step 1 :

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

Step2 :

   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

Ok, I found one really good library as a solution, it's called react-scroll and it has an option to wrap link you need in earlier defined scroll link, and to wrap component you want it to link as a specific part of the page with Element with id you gave to scroll link as a parameter... Try it if you need it somehow.

Answer 3

Try something like this in your component:

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

useParams() allows you to access :svetsko. When the component loads, you can use scrollToSection to navigate between different parts of the page. The scrollRef is used to access the DOM element you want to scroll to.

window.scrollTo(0,scrollRef.offsetTop)

The markup would look something like this:

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