如何在React.js中根据路由过滤帖子数组？

你要做的就是利用React Router提供的路由参数来筛选帖子，下面我结合你的代码给出具体的修改方案：

核心思路 #

React Router的Route组件在render回调中会传入包含match对象的props，match.params.slug就是你路由中:slug对应的动态值（比如访问/food/chocolate时，这个值就是chocolate）。我们可以用这个值来过滤你的帖子数组，只渲染匹配的内容。

修改你的App.js代码 #

首先确保你在组件挂载时调用getData方法（如果还没加的话），然后调整Route的渲染逻辑：

class App extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    this.getData(); // 组件挂载时获取帖子数据
  }

  getData() { 
    axios.get('/posts.json')
      .then(response => { 
        const updatedPosts = response.data.map(post => ({ ...post }));
        this.setState({ posts: updatedPosts }); 
      })
      .catch(error => { 
        console.log(error); 
      }); 
  }

  render() {
    return (
      <div className={classes.App}>
        <Layout>
          <Switch>
            <Route 
              path="/food/:slug" 
              exact 
              render={(props) => {
                // 从props中拿到路由参数slug
                const { slug } = props.match.params;
                // 筛选出与slug匹配的帖子（这里假设你的帖子对象用`url`字段存匹配值，根据实际情况修改）
                const filteredPosts = this.state.posts.filter(post => post.url === slug);

                // 处理没有匹配到帖子的情况
                if (filteredPosts.length === 0) {
                  return <h1>没有找到相关的帖子哦</h1>;
                }

                // 渲染匹配的帖子
                return filteredPosts.map(post => (
                  <FullPost 
                    key={post.id} 
                    id={post.id} 
                    {...props} 
                  />
                ));
              }} 
            />
            <Route render={() => <h1>Whoops! What you're looking for isn't here anymore.</h1>} />
          </Switch>
        </Layout>
      </div>
    );
  }
}

关键说明 #

• 字段匹配调整：如果你的帖子对象不是用url字段来存储分类/标识（比如用slug、category等），把post.url === slug改成你实际的字段即可。
• 空数组处理：添加了没有匹配到帖子时的提示，避免页面空白。
• 组件挂载调用数据：在componentDidMount中调用getData，确保组件加载时就获取到帖子数据，避免初始渲染时posts为空的问题。

这样当你访问/food/chocolate时，就只会渲染url字段等于chocolate的帖子啦！

内容的提问来源于stack exchange，提问作者user2986096