Routing to specific part of other component in React

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....

Have you tried replacing the News component with the Svetsko component on the route? — Cameron Downer
– Cameron Downer, Commented Jan 16, 2020 at 13:50
Svetsko isn't component, it is className inside News component... — Slobodan Draksimovic
– Slobodan Draksimovic, Commented Jan 16, 2020 at 13:51
In News component you must read parameters from router and then make decision what to do with that parameter (load content for that apply different style or soemthing else) — Florim Maxhuni
– Florim Maxhuni, Commented Jan 16, 2020 at 13:52
If you use hooks you can use this link (check how he used useParams) reacttraining.com/react-router/web/example/url-params — Florim Maxhuni
– Florim Maxhuni, Commented Jan 16, 2020 at 13:54

Bonnie · Accepted Answer · 2020-01-16 14:09:52Z

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:

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

edited Jan 16, 2020 at 14:09

answered Jan 16, 2020 at 13:58

Bonnie

6218 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Slobodan Draksimovic Over a year ago

Should I declare it in News component since I'm trying to access the className in it?

Bonnie Over a year ago

Yep, this is where you will grab the route param and use the ref.

Slobodan Draksimovic Over a year ago

import { useParams, scrollRef } from 'react-router-dom' const News = () => { let { scrollToSection } = useParams(); scrollRef = React.createRef(); window.scrollTo(0,scrollRef.offsetTop) return ( trows error saying scrollRef isn't defined...

Bonnie Over a year ago

add ref="scrollRef" to the svetsko element in your markup

Prakash Karena · Accepted Answer · 2020-01-20 14:09:32Z

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.

edited Jan 20, 2020 at 14:09

answered Jan 16, 2020 at 14:03

Prakash Karena

2,6031 gold badge9 silver badges18 bronze badges

4 Comments

Slobodan Draksimovic Over a year ago

this is actually taking me to news page, but not on directed path... ` <div className="card"> <Link to={{ pathname : "/news", state: { news: 'eyof'} }}> <div className="card-header"> <h3>EYOF 2019. year</h3> </div> </Link> </div> ` and I puted last line of code inside od targeted div... shuld I wrap it around text or what? But any way, state isn't commited...

Prakash Karena Over a year ago

no, look like you are trying to pass your child with link don't do that you have to render your component conditionally in your news page

Slobodan Draksimovic Over a year ago

So it would be better for me to declare component called eyof, svetsko, and rest, so I can call them true conditional declaration and render it?

Slobodan Draksimovic Over a year ago

and what do you think about putting all className-s content as a JSON file with id: eyof, content: text I'm using? It can save some performance and speed webpage up...

Slobodan Draksimovic · Accepted Answer · 2020-01-29 10:50:36Z

1

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.

answered Jan 29, 2020 at 10:50

Slobodan Draksimovic

1071 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Routing to specific part of other component in React

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related