Link needs to be pressed twice, React Router v4

Question

I have a list of cards that, when I press them only the url changes.

The route consist of a baseUrl + a changing ID.

I have tried these solutions:

• Adding withRouter and having the 'exact' tag on the route
• I don't use dispatch, is a different type of problem

• Or from the documentation of block components, I passed down location to all candidates that could be blocking the change.

  class Main extends Component {
      constructor(props) {
          super(props);
      }
  
  render() {
      const { results, fetchState, location } = this.props;
      return (
          <Strip location={location}>
              {
                  results.length > 0 ?
                      <div location={location}>
                          <Sort />
                          {
                              results.map((result, i) =>
                                  <div key={i} location={location}>
                                      <Card to={urls.profile.base + '/' + result._id || 'unknown'}  result={result} _id={result._id}  />
                                      <Seperator />
                                  </div>
                              )}
                      </div>
                      :
                      <Flex>
                          {
                              fetchState === 'pending' ?
                                  <Loader /> :
                                  <div style={{ textAlign: 'center' }}>  No result found  </div>
                          }
                      </Flex>
  
              }
          </Strip>
  
  
            );
      }
  

  } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));

and the Card Component:

const Card = (props) => {
    const { result, _id } = props;
    return (
        <Resp.desktop>
            {
                (matches) =>
                    <Element  mobile={!matches} >
                        <Name company={result.company} />
                        {matches ?
                            <Info services={result.services} company={result.company} />
                            :
                            <Info company={result.company} />
                        }
                        {matches && <Pictures />}
                    </Element>
            }
        </Resp.desktop>
    );
}

Does anyone have idea how to solve this?

Thanks!