Question

我正在使用一个API，可以在其中使用帖子ID进行搜索。如何将链接更改为我创建的子弹。用Ex代替/ posts / 1，它将变成posts / slugtitle

Post.js

componentDidMount() {
  const { match: { params } } = this.props;
  axios
    .get(`/api/posts/${params.postId}`)
    .then(response => {
      console.log(response);
      this.setState({ post: response.data });
    })
    .catch(error => console.log(error));
}

Routes.js

<Route path={"/post/:postId"}  strict component={PostShow} />

此外，如果没有带有搜索ID的帖子，重定向的最简单方法是什么？

Answer 1

更改代码中的某些内容，您必须知道，女巫参数是您通过init传递的，也许是您想要传递标题或id的，我给您和示例，
我们需要的是一种状态，知道我们是标题还是id，因此添加此状态：

constructor(props) {
    super(props);
    this.state = {
        passTitle: false,
        title:"",
        id:0
    }
}

现在您必须在单击title时更改此状态，（想象一下，当用户单击title时，请更改title的path，否则，请在id上更改path：

handleTitleClick=(title)=>{
   this.setState({title:title,passTitle:true});
}

handleNotTitleClick=(id)=>{
   this.setState({id:id,passTitle:false});
}

将您的componentDidMount更改为一个函数：

runPost=()=>{
   const { match: { params } } = this.props;
     const {passTitle,title,id}=this.state
     axios
        .get(`/api/posts/${passTitle?title:id}`)
        .then(response => {
          console.log(response);
          this.setState({ post: response.data });
        })
         .catch(error => console.log(error));
   }

然后在this.setState之后运行它：

handleTitleClick=(title)=>{
   this.setState({title:title,passTitle:true},()=>{this.runPost()});
}

handleNotTitleClick=(id)=>{
   this.setState({id:id,passTitle:false},()=>{this.runPost()});
}

如何使用React Router DOM将URL的id更改为段

1 个答案: