He reducido este ejemplo a barebones para que sea lo más simple posible.

Tengo una página de PostPage con un enlace a HomePage

El enlace en la página de HomePage envuelve un componente de Post que simplemente dice "publicar" (originalmente era una lista)

CódigoSandbox

He buscado más de unas pocas preguntas similares y de alguna manera ninguna de ellas parece ayudar.

Usando react-router-dom: ^5.3.0

Aplicación.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;

Página principal

 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

Correo

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

PostPágina

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

historia

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