React routing link from nested component

Question

I want to add routing to my app but the "Link" I made in a child component doesn't work onClick, but only when I refresh the page. I guess the problem is the way too much nesting but I have no idea how can I solve it.

One mention: I imported BrowserRouter as Router everywhere.

This is the file structure

This is the code spippets that related to my problem:

App component:

   function App() {
  return (
    <Router >
      <div className="App">
        <Switch>
          <Route exact path="/" component={NewFetch} />
          <Route path="/cardID/:id" component={Details} />     //The route that doesn't work
        </Switch>
      </div>
    </Router>

NewFetch (Main) component:

<Router> //Tried with <React.Fragment>
...
   <Route path={["/cards/:name", "/cards/:filter"]}>
      <Filter isLoaded={isLoaded} handleScroll={handleScroll} toScrollTop={toScrollTop} value={value} 
         scrollPosition={scrollPosition} jumpToTop={jumpToTop} testFilter={testFilter} />
   </Route>
</Router>

Card (child 2) component from :

const Card = (props) => {
  return (
    <div className={props.img ? "card" : "hide"}>
      <Link to={`/cardID/id=${props.id}`} >          //Link that doesn't connect
        <img src={props.img} alt={props.name} />
      </Link>
    </div>
  )
};

So basically I can't connect the "Link" from a hardly nested component.

With the middle code snippet what were you trying to achieve there and you can not give a path as an array — Ntshembo Hlongwane
– Ntshembo Hlongwane, Commented Nov 16, 2020 at 22:01
Basically i wanna load 2 different api calls to the same component, and i wanted to separate the urls for them — Yhunie-the-cat
– Yhunie-the-cat, Commented Nov 17, 2020 at 12:48
If you want to make two request or more to a back-end api you have to make use of axios.all seems like you have more than one query here — Ntshembo Hlongwane
– Ntshembo Hlongwane, Commented Nov 17, 2020 at 13:08

Ntshembo Hlongwane · Accepted Answer · 2020-11-16 22:00:53Z

1

function App() {
  return (
    <Router >
      <div className="App">
        <Switch>
          <Route exact path="/" component={NewFetch} />
          <Route path="/cardID/:id" component={Details} />     //The route that doesn't work
        </Switch>
      </div>
    </Router

const Card = (props) => {
  return (
    <div className={props.img ? "card" : "hide"}>
      <Link to={`/cardID/id=${props.id}`} >          //Link that doesn't connect
        <img src={props.img} alt={props.name} />
      </Link>
    </div>
  )
};

Above is your code which might look right but the is a slight bug here:

The bug is in the wrong way you are linking to path="/cardID/:id
What you are to do is in your Card child2 is:

const Card = (props) => {
  return (
    <div className={props.img ? "card" : "hide"}>
      <Link to={`/cardID/${props.id}`} > //Removed **id=....**
        <img src={props.img} alt={props.name} />
      </Link>
    </div>
  )
};

This is what you have to understand that when you make a route like so path="/route/:id" the :id is just a placeholder waiting for you to place anything so id is commonly used so your code makes sense and mainly basically you want to route based on id but one could have written :cat for example but that is just a placeholder

answered Nov 16, 2020 at 22:00

Ntshembo Hlongwane

1,0601 gold badge12 silver badges26 bronze badges

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

2 Comments

Yhunie-the-cat Over a year ago

It might be surprising but it doesn't work even though it should. I rewrote the code but i got the same "effect".

Yhunie-the-cat Over a year ago

I did and you were right about this, but after a bit more research I figured out that I had 1 more Router tag in my child component, that's why my Link does't triggered.

Collectives™ on Stack Overflow

React routing link from nested component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related