Reactjs 反应链接更改URL但不呈现页面

我在我的React组件中加载了一堆帖子，并且我正在尝试使其在用户单击标题时重定向到所选帖子。我在另一个组件中实现了相同的逻辑，它工作得很好，但在这里它没有。URL已更改，但内容不会重新呈现，除非我刷新页面。我试图通过添加一个刷新页面的

onClick

事件来解决这个问题，但这只是将url更改为

localhost:3000/planers

，它是一个

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;

import React，{Component}来自“React”
从“axios”导入axios；
从“../Spinner/Spinner”导入微调器；
从“react router dom”导入{Link，Switch}；
类扩展组件{
状态={
员额：[]，
当前页面：1，
setCurrentPage:1，
后页：5，
加载：错误
}
componentDidMount（）{
const fetchPosts=async（）=>{
this.setState（{…this.state，加载：true}）；
const res=等待axios.get（'https://app.heroku/');
this.setState（{…this.state，posts:res.data，loading:false}）；
};
fetchPosts（）；
}
render（）{
const retracadesposts=this.state.posts.filter（（项）=>{
返回项目。类别===“逆行”
})
if（this.state.loading）{
返回
}
返回(
{retracadesposts.map（post=>(
{发布日期}
{post.title}
{post.postContent.substring（01100）+“…}
))}
)
}
} 
导出默认行星；

这是我的父组件：

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;

import React，{Component}来自“React”
从“react router dom”导入{Link，Route，BrowserRouter}；
从“../Planets/Planets.jsx”导入行星；
从“../Signs/Signs.jsx”导入符号；
从“../PlanetaryAspects/PlanetaryAspects.jsx”导入PlanetaryAspects；
从“../Houses/Houses.jsx”导入房屋；
类BlogCategoriesMenu扩展组件{
状态={
isClicked:错误
}
render（）{
返回(
行星
标志
行星方面
房屋
)
}
} 
导出默认博客分类菜单；

在这里，我定义了一些全球范围内的旋转：

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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./components/Home/Home.jsx”导入Home
从“./components/Error/Error.jsx”导入错误；
从“./components//Blog//Blog.jsx”导入日志；
从“/components/Post/Post.jsx”导入Post；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

在装入组件（插入到树中）后，将立即调用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>
....

。。。。
fetchPosts（）}to={`/post/${post.\u id}`>
.....
....

是的，我正在componentDidMount（）钩子中进行调用，我试图重定向onClick，而不是再次获取它们。url get已更新，但页面不会更改，除非我使用F5刷新它。您是否为fetchPosts创建了新函数以进行onClick？如果这个函数。在componentdidMonut中，它可能无法工作。但是我需要在onClick事件上重定向，而不是再次获取它们？或者您的意思是不应该在componentDidMount（）方法中获取它们？