问使用onClick事件返回页面刷新页面不存在

EN

import React, { Component }  from 'react'
import { NavLink, Route, BrowserRouter } from 'react-router-dom';
import Planets from '../Planets/Planets.jsx';
import Signs from '../Signs/Signs.jsx';
import PlanetaryAspects from '../PlanetaryAspects/PlanetaryAspects.jsx';
import Houses from '../Houses/Houses.jsx';

class BlogCategoriesMenu extends Component {


  render() {
    return(
        <div className="blog-categories-menu">
        <BrowserRouter>
        <div className="blog-categories-menu__items">
         <NavLink to="/planets" className="blog-categories-menu__items-a"  activeClassName="isActive">Planets</NavLink>
         <NavLink to="/signs" className="blog-categories-menu__items-a" activeClassName="isActive">Signs</NavLink>
         <NavLink to="/planetary-aspects"  className="blog-categories-menu__items-a" activeClassName="isActive">Planetary Aspects</NavLink>
         <NavLink to="/houses"  className="blog-categories-menu__items-a" activeClassName="isActive">Houses</NavLink>
         <div className="content-container">
         <Route path="/planets" component={Planets}></Route>
         <Route path="/signs" component={Signs}></Route>
         <Route path="/planetary-aspects" component={PlanetaryAspects}></Route>
         <Route path="/houses" component={Houses}></Route>
         </div>
         </div>
        </BrowserRouter>
       </div>

    )
  }
} 

export default BlogCategoriesMenu;

import React, { Component  }  from 'react'
import axios from 'axios';
import Spinner from '../Spinner/Spinner';
import { Link, Switch } from 'react-router-dom';

class Planets extends Component {
    state = {
        posts: [],
        currentPage: 1,
        setCurrentPage: 1,
        postsPerPage: 5,
        loading: false
      }

      componentDidMount() {
        const fetchPosts = async () => {
            this.setState({...this.state, loading: true});
            const res = await axios.get('https://app-endpoint/');
            this.setState({...this.state, posts: res.data, loading: false});
          };
          fetchPosts();
        }

        reloadPage = () => {
         window.location.reload()
        }

  render() {
    const retrogradesPosts = this.state.posts.filter( (item) => {
        return item.categories === 'retrogrades'
      })

      if(this.state.loading) {
        return <Spinner/>
      }
        return(
            <div className="planet-articles-container">
           <div className="">
          <div className="">
          {retrogradesPosts.map(post => (
          <div key={post._id} className="planet-articles-container__post">
          <img className="planet-articles-container__post-img" src={post.picture} alt="avatar"/>
          <div className="">
          <div className="">
           <h2 className="">{post.date}</h2>
            <Link to={`/post/${post._id}`} onClick={this.reloadPage}> <p className="">{post.title}</p></Link>
           <p className="planet-articles-container__post-text">{post.postContent.substring(0, 100) + "..."}</p>
        </div>
        </div>
      </div>
          ))}
            </div>
         </div>
           </div>
        )
  }
} 

export default Planets;

import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './components/Home/Home.jsx'
import Error from './components/Error/Error.jsx';
import Blog from './components//Blog//Blog.jsx';
import Post from './components/Post/Post.jsx';

const App = () => {

  return (
   <BrowserRouter>
   <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/blog" component={Blog} exact/>
   <Route path="/post/:id" component={Post} exact/>
   <Route component={Error}/>
   </Switch>
   </BrowserRouter>
  );
};

export default App;