0

I was trying to render my Carrito.js component when the user access /carrito but the component is not rendering. I tried using <Link to='/carrito /> Carrito </Link> and the anchor tag but neither of them renders it.

<Router>
        <Route
          path="/tienda"
          exact
          component={({ history }) => <Productos history={history} />}
        />
        <Route
          path="/carrito"
          component={({ history }) => <Carrito history={history} />}
        />
</Router>

I can give any information if you need anything else

EDIT:

If I render <Carrito /> where <Productos /> is, it shows the component, so it could be a problem with the Route

  • Just do `` – Shivam Jha Aug 01 '21 at 18:31
  • ```Productos``` is rendering, what is not rendering is ```Carrito```. It doesn't matter if I render them as you said or as I'm doing, I will eventually use the ```history``` –  Aug 01 '21 at 18:33
  • Can you reproduce your issue in a Code Sandbox. Also, to render with props, you should use [`render` instead of `component`](https://stackoverflow.com/a/48152635/11667949) – Shivam Jha Aug 01 '21 at 18:35

1 Answers1

0

For some reason, I just added the <Switch></Switch> from react-router-dom and inside where the routes and now all rendered.

<Router>
        <Navbar />
        <Switch>
          <Route path="/tienda">
            <Productos />
          </Route>
          <Route path="/carrito">
            <Carrito />
          </Route>
        </Switch>
      </Router>