Routing To Specific Part Of Other Component In React

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 redirec

Solution 1:

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:

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

Solution 2:

You need only one route like

<Switch><Routeexactpath='/news'component={News} /></Switch>

you can give link like

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

 <divclassName="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 andreturn your new post jsx with your data.

Step2 :

   So,when you get your eyof in your page then you are going tocall 
this functionand pass your data related to your eyof and that functionreturn your new post to your page.

Solution 3:

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.