React Link 更改 URL 但不呈现页面

Question

我在我的 React 组件中加载了一堆帖子，我试图让当用户点击标题时，他会被重定向到所选帖子。我已经在另一个组件中实现了相同的逻辑并且它工作正常，但在这里它没有。 URL 已更改，但内容不会重新呈现，除非我刷新页面。我尝试通过添加刷新页面的onClick 事件来解决问题，但这只是将url 更改为localhost:3000/planets，它是404。我也尝试过推送历史，因为我读到这可能会有所帮助，但它没有，那么我该如何重新渲染组件？

这是我的组件：

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.heroku/');
            this.setState({...this.state, posts: res.data, loading: false});
          };
          fetchPosts();
        }


  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}`}> <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, { Component }  from 'react'
import { Link, 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 {

    state = {
     isClicked: false
    }

  render() {
    return(
        <div className="blog-categories-menu">
        <BrowserRouter>
        <div className="blog-categories-menu__items">
         <Link to="/planets" className="blog-categories-menu__items-a">Planets</Link>
         <Link to="/signs" className="blog-categories-menu__items-a">Signs</Link>
         <Link to="/planetary-aspects"  className="blog-categories-menu__items-a">Planetary Aspects</Link>
         <Link to="/houses"  className="blog-categories-menu__items-a">Houses</Link>
         <div>
         <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;

以及我在全球范围内定义了一些 rotues 的地方：

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;

Answer 1

componentDidMount() 在组件安装后立即调用（插入到树中）。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

所以，你应该创建更新函数，然后连接你的点击事件。

例如；

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

如果你点击，这个页面会发生一些变化。

 ....
<Link onClick={() => fetchPosts() } to={`/post/${post._id}`}>
 .....
</Link>
....