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;

以及我在全局上定义了一些角色的地方：

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节点的初始化应在此处进行。如果您需要从远程端点加载数据，那么这是实例化网络请求的好地方。

因此，您应该创建更新功能，然后连接您的click事件。

例如；

 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>
....

React Link更改URL但不呈现页面

1 个答案: