当我单击一个按钮时，页面不会在 React Javascript 中刷新

Question

I created a page that when I click the shop button the URL is displayed on the url space but the page does not load onclick of the button

import React from "react";
import {withRouter} from 'react-router-dom';

import './menu-item.styles.scss'

const MenuItem= ({title, imageUrl, size, history, linkUrl , match}) => (
    <div 
        className={`${size} menu-item`} 
        onClick = {() => history.push(`${match.url},${linkUrl}`)}>
        <div 
            className="background-image"
            style={{
            backgroundImage : `url(${imageUrl})`
            }}
        />
        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
)

export default withRouter(MenuItem);

The page that is supposed to display is only shown when I refresh the page but when I click the button the url is displayed but not loaded.

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import './App.css';

import HomePage from './pages/homepage/home.component';
import ShopPage from './pages/shop/shop.components';
import Header from './components/header/header.component';

function App() {
  return (
    <div>
      <Header/>
      <Switch>
        <Route exact path='/' component={HomePage}/>
        <Route path='/shop' component={ShopPage}/>
      </Switch>
    </div>
  );
}

export default App;

Answer 1

import { NavLink } from 'react-router-dom';

    <NavLink 
        className={`${size} menu-item`} 
        to={linkUrl}>
        <div 
            className="background-image"
            style={{
            backgroundImage : `url(${imageUrl})`
            }}
        />
        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </NavLink>