Question

我已经完成了使用帖子设置动态嵌套路由的教程作为示例。但是，该示例仅显示了如何在URL中使用：id，我希望能够使用：来自我的数据库的标题。

现在，当我点击来自/ posts的帖子列表中的项目时，我可以获得此网址：'/ posts / 1'来自'/ posts /：id'。

但是，我希望能够在选择拉面帖后在网址中显示'/ posts / ramen'。我尝试将'id'更改为'this.props.history.push'的'title'，但这似乎影响了FullPost.js使用该id获取通过Axios进行数据检索的正确路径的方式。< / p>

以下是我的代码：

我的数据设置如下： posts.json

    posts:    
        0:
            title: "ramen"
            id: 1
        1:
            title: "udon"
            id: 2
        2:
            title: "sushi"
            id: 3`

Posts.js：这是一个帖子列表，每个帖子都可以选择

import React, { Component } from 'react';
import axios from '../../../axiosPosts';

import Aux from '../../../hoc/Aux/Aux';
import classes from './Posts.css';
import Post from '../../../components/Post/Post';


class Posts extends Component {

    state = {
        posts: []
    }

    componentDidMount () {
        this.getData(this.props.pathname, this.props.filter);
    }

    getData(pathname, filter) {
        axios.get(pathname + '.json')
            .then(response => {
                const post = response.data.filter(({category}) => category === filter);

                const updatedPosts = post.map(post => {
                    return {
                        ...post
                    }
                });

                this.setState({
                    posts: updatedPosts
                });          
            })
            .catch(error => {
                console.log(error);
            });
    }

    postSelectedHandler = ( id ) => {
        this.props.history.push( this.props.match.url + '/' + id );
    }

    render () {
        let posts = <p style={{textAlign: 'center'}}>Whoops! Something went wrong.</p>;

        if(!this.state.error) {
            posts = this.state.posts.map(post => {
                return (
                    <Post 
                        key={post.id}
                        title={post.title}
                        clicked={() => this.postSelectedHandler( post.id )} />
                );
            });
        };
        return (
            <Aux>
                <div className={classes.PostList}>
                    <h2 className={classes.PostListTitle}>{this.props.filter}</h2>
                    {posts}
                </div>
            </Aux>
        )
    }
}

export default Posts;

FullPost.js - 这是在选择帖子时加载的页面

     import React, { Component } from 'react';
     import axios from '../../../axiosPosts';

     import classes from './FullPost.css';

     class FullPost extends Component {

     state = {
         loadedPost: null
     }

     componentDidMount () {
         this.loadData();
     }

     loadData() {
         if ( this.props.match.params.id ) {
              if ( !this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== +this.props.match.params.id) ) {
                 axios.get( '/posts/' + (this.props.match.params.id - 1) + '.json' )
                     .then( response => {
                         this.setState( { loadedPost: response.data } );
                     } );
             }
         }
    }
     render () {
        let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;
        if ( this.props.match.params.id ) {
             post = <p style={{ textAlign: 'center' }}>Loading...!</p>;
        }
         if ( this.state.loadedPost ) {
            post = (
                <div className={classes.FullPost}>
                     Content
                 </div>
            );
        }
        return post;
    }
}
export default FullPost;

Answer 1

您可以将帖子的“标题”传递给“postSelectedHandler”函数，而不是Posts.js中帖子的“id”。

<Post 
  key={post.id}
  title={post.title}
  clicked={() => this.postSelectedHandler( post.title, post.id )} 
/>

你的'postSelectedHandler'功能就像：

postSelectedHandler = ( title ) => {
    const URL = `${this.props.match.url}/${title}`;
    this.props.history.push({pathname: URL, id: id });
}

在FullPost.js中访问此ID：

const { location: {id} } = this.props;

在“路线”中，您可以使用'/ posts /：title'路线更改'/ posts /：id'路线。

此路线更改仅适用于您的重要性，因此，如果其他人看到您的代码，他们将很容易理解您使用帖子的标题作为路线参数。

如何在React.js中使用帖子：url中的title而不是：id

1 个答案: