Question: I have a user array and I show every user on a card. I only show the avatar, name and surname on the card. But when clicking on each card, I want to dynamically go to a `UserInfo`component for that card and show all the information. I am new on react-router, so to understand how it works, I tried to do with using react-router. I used `Link` with ids but it always display `Main` component. It never show `UserInfo` component. I'm doing something wrong but couldn't figure it out. Can you help ?

This is routes:

```
return (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={Main} true />
        <Route path="/users/:id" component={UserInfo} />
      </Switch>
    </div>
  </Router>
);

```

This is Card Component:

```
import React from "react";
import { Link } from "react-router-dom";

function Card({ id, avatar, first_name, last_name }) {
  return (
    <Link className="card__item" to={`/users/${id}`}>
      <div
        className="card__image"
        style={{ backgroundImage: `url(${avatar})` }}
      ></div>
      <div className="card__text">
        <div>
          {first_name} {last_name}
        </div>
      </div>
    </Link>
  );
}

export default Card;

```

And this is what the main component returns

```
return (
  <section className="cards container">
    <div className="card__grid">
      {users.map((user) => {
        return <Card key={user.id} {...user} />;
      })}
    </div>
  </section>
);

```

Answer: 
`<Route>` components render if *any* part of the `path` prop matches the current path. So if you have this:

```
      <Switch>
        <Route path="/" component={Main} true />
        <Route path="/users/:id" component={UserInfo} />
      </Switch>

```

The first `<Route>` will *always* match because `/` matches both `/` *and* `/users/:id`.

The order of `<Route>` components matters; generally you want to put the most specific route paths first, and the least specific route path last as a "catch all" or fallback. In your case you simply need to swap the order.

```
      <Switch>
        <Route path="/users/:id" component={UserInfo} />
        <Route path="/" component={Main} true />
      </Switch>

```

Edit: or, you can set the `exact` prop, which will force the matching to be, well, exact. This forces you to put `exact` on multiple (or even all of) your routes, which may not be desirable compared to simply ordering the routes in the order that they should match.

<https://reactrouter.com/web/api/Route/path-string-string>
@jered's answer is correct but you can also use the [`exact`](https://reactrouter.com/web/api/Route/exact-bool) prop on the `Route` to specify that it should only render the Main if the path matches exactly the "`/`"

Like this:

```js
<Switch>
  <Route path="/" component={Main} exact={true} />
  <Route path="/users/:id" component={UserInfo} />
</Switch>

```