I've torn this example down to barebones to make it as simple as possible.

I have a HomePage with a Link to PostPage

The Link in HomePage wraps a Post component that just says "post" (was originally a list)

CodeSandbox

I've looked up more than a few similar questions and somehow none of them seem to help.

Using react-router-dom: ^5.3.0

App.js

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

import HomePage from './pages/HomePage'
import PostPage from './pages/PostPage'

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <Switch>
          <Route path='/' exact component={HomePage} />
          <Route path='/post' component={PostPage} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

HomePage

import React from 'react'
import { Link } from 'react-router-dom'
import Post from '../components/Post'

class HomePage extends React.Component {
    render() {
        return (
            <Link to='/post'>
                <Post />
            </Link>
        )
    }
}

export default HomePage

Post

const Post = () => <div>Post component</div>
export default Post

PostPage

const PostPage = () => <div>Post Page</div>
export default PostPage

history

import { createBrowserHistory } from 'history'
export default createBrowserHistory()