React.js中如何在URL中用:title替代:id实现动态路由

没问题，我来帮你把路由从用id改成用title，同时修复数据获取的逻辑。咱们一步步来：

1. 先修改路由配置 #

首先你需要在路由定义里把:id替换成:title（假设你用的是React Router）：

// 原来的路由
<Route path="/posts/:id" component={FullPost} />

// 修改后
<Route path="/posts/:title" component={FullPost} />

2. 更新Posts组件的跳转逻辑 #

在Posts.js里，把点击文章时传递的参数从id改成title，同时更新跳转路径：

修改postSelectedHandler方法： #

postSelectedHandler = (title) => {
  // 用模板字符串拼接更清晰
  this.props.history.push(`${this.props.match.url}/${title}`);
}

修改Post组件的点击事件传参： #

posts = this.state.posts.map(post => {
  return (
    <Post 
      key={post.id} 
      title={post.title} 
      clicked={() => this.postSelectedHandler(post.title)} // 这里把post.id改成post.title
    />
  );
});

3. 修复FullPost组件的数据获取逻辑 #

原来的FullPost.js是通过id-1直接取数组索引，现在要换成根据title匹配对应的文章，所以得调整loadData方法：

更新loadData方法： #

loadData() {
  const postTitle = this.props.match.params.title;
  if (postTitle) {
    // 避免重复请求：如果当前已经加载了目标文章，就不再请求
    if (!this.state.loadedPost || this.state.loadedPost.title !== postTitle) {
      axios.get('/posts.json') // 先获取所有文章
        .then(response => {
          // 从文章列表中找到title匹配的那一篇
          const targetPost = response.data.find(post => post.title === postTitle);
          this.setState({ loadedPost: targetPost });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

调整render里的判断条件： #

把原来判断params.id的地方改成判断params.title：

render () {
  let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;
  if (this.props.match.params.title) { // 这里改成title
    post = <p style={{ textAlign: 'center' }}>Loading...!</p>;
  }
  if (this.state.loadedPost) {
    post = (
      <div className={classes.FullPost}>
        <h2>{this.state.loadedPost.title}</h2>
        {/* 这里可以添加文章的其他内容，比如正文、作者等 */}
        Content for {this.state.loadedPost.title}
      </div>
    );
  }
  return post;
}

注意事项 #

• 确保你的posts.json里每个文章的title都是唯一的，不然find方法只会返回第一个匹配的文章，可能导致错误。
• 如果你的文章数量很多，每次都请求全部文章可能不太高效，后续可以考虑在后端加一个根据title查询单篇文章的接口，这样前端就不用请求全部数据了。

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