如何通过单击使用 react-router-parameters 来显示特定的帖子详细信息？

Question

我正在使用地图查看所有使用 axios 的帖子。我只想在单击特定帖子以查看更多信息时显示。我正在使用反应参数。但它不起作用。

这是我的一个组件

import React, {Component} from 'react'; 
import Album from './album'
import {Link, BrowserRouter as Router, Route} from 'react-router-dom'

import axios from "axios" 

class ViewDataAPI extends Component{

    state = {
        posts: []
    }

    componentDidMount(){
        axios.get('https://jsonplaceholder.typicode.com/comments')
        .then(response => {
            this.setState({
                posts: response.data
            })
        })
        .catch(error => console.log('error'))
    }

    render(){  
        let { posts } = this.state
        if(posts.length === 0){
            return <h1>Loading...</h1>
        }
        else{
            return(
                <Router>
                    <div className="header">
                        <div className="container">
                        <div className="row">
                                <div className="col-lg-12 col-sm-12 col-xs-12">
                                    <div className="text-center mb-20">
                                        <h1>View Data From API</h1>
                                        <p>using jsx-component, props, state, map in react </p>
                                    </div>
                                </div>
                            </div> 
                            <div className="row">  
                                    {
                                        posts.map(post => 
                                            {
                                                return ( 
                                                        <Album 
                                                            key={post.id}  
                                                            name={post.name} 
                                                            email = {post.email} 
                                                            body = {post.body} 
                                                            view = {post.id} 

                                                        /> 
                                                )
                                            }
                                        )
                                    }   
                            </div>

                            {/* here is im using params, and to match by clicking specific id to show/view more information */}
                            <div className="row">  
                                  {posts && (
                                       <Route path="/album/:albumId" 
                                            render = {({match}) => (
                                                <ViewPosts {...posts.find(pv => pv.id === match.params.albumId)} />
                                            )}
                                       />
                                  )} 

                            </div>
                        </div> 
                    </div>
                </Router>
            )
        }


    }
}

export default ViewDataAPI;


// This component using for show details
const ViewPosts = ({posts}) =>{  
        return( 
            <div className="col-lg-6"> 
                <div className="card border-dark mb-3"> 
                    <div className="card-body text-dark">  
                        <div className="album">
                            <h3>{posts.name}</h3> 
                            <h3>{posts.email}</h3> 
                            <Link to="./">Back To Home</Link>

                        </div>
                    </div> 
                </div> 
            </div>   
        );

}

这是有链接的相册组件

import React, {Component} from 'react'
import {Link} from "react-router-dom"

class Album extends Component{ 
    render(){ 
        return( 
            <div className="col-lg-6"> 
                <div className="card border-dark mb-3"> 
                    <div className="card-body text-dark">  
                        <div className="album">
                            <h3>{this.props.name}</h3>
                            <p>{this.props.email}</p>  
                            <p>{this.props.body}</p> 
                            <Link to={`/album/${this.props.view}`}>View</Link> 
                        </div>
                    </div> 
                </div> 
            </div>   
        );
    }
}

export default Album;

https://react-pin.netlify.com/

请按照上面的链接了解我正在尝试做的事情。请先去一个"View Data From API"

我的github链接https://github.com/sultan0/reactpin

Answer 1

• 路由参数是一个字符串。没有隐式类型转换 与=== 运算符。因此，您必须明确地执行此操作。请。看 Comparison operators 以获得进一步的解释。

• ... 运算符在这里放错了位置。

解决办法是：

 <ViewPosts posts={posts.find(pv => pv.id === parseInt(match.params.albumId))} />

更新

您想使用 react 路由器中的 Switch 组件：

Switch 的独特之处在于它只呈现一条路线。相比之下，与位置匹配的每个 Route 都会以包容性方式呈现。

请参考react router documentation。

我创建了一个pull request 作为示例。希望对您有所帮助。