How can I prevent addition of Strings in URL in ReactJS?

Question

I created a dynamic menu that is accessible to both public and registered users. The problem is that I have this:

{pages.length > 0 ? (
  pages.map(page => (
    <li key={page._id} className="nav-item">
      {page._id ? (
        <Link to={`pages/${page._id}`} className="nav-link">{page.title}</Link>
      ) : (
          <Link to={`pages/${page._id}`} className="nav-link">Hola 2</Link>
        )}
    </li>
  ))
) : (
    <li className="nav-item">
      <a className="nav-link" href="#!">No Pages Found</a>
    </li>
  )}

Now when I'm in the homepage and a click a URL, the links works great:

localhost:3000/pages/5d2ea3a1ef0ba93f9cd1b980

Once I'm inside an URL, I try to click a different link and suddenly it now behaves like this:

localhost:3000/pages/pages/5d2ea3a1ef0ba93f9cd1b980

and so on:

localhost:3000/pages/pages/pages/5d2ea3a1ef0ba93f9cd1b980

Does anyone has an idea why is this happening?

try with <Link to={`/pages/${page._id}`} className="nav-link">Hola 2</Link> — jogesh_pi
– jogesh_pi, Commented Jul 17, 2019 at 6:21
I can not believe it was so easy to solve, thank you!. I'm going to mark your comment as useful as you did not publish an answer. — Kirasiris
– Kirasiris, Commented Jul 17, 2019 at 6:33

banerjeesouvik · Accepted Answer · 2019-07-17 06:24:02Z

1

Use to={/pages/${page._id}} instead of to={pages/${page._id}}. If the link doesn't start with a /, it is treated as relative to current url.

answered Jul 17, 2019 at 6:24

banerjeesouvik

2221 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How can I prevent addition of Strings in URL in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related