match.params.id 在反应箭头功能组件中返回未定义

如何解决match.params.id 在反应箭头功能组件中返回未定义

我正在创建一个简单的投资组合应用程序，我需要为项目列表中的每个项目提供一个单独的屏幕。这样做时，当我尝试使用 match.params.id 从 URL 获取该项目的 Id 时，它会给出 TypeError : Cannot read property 'params' of undefined。 我的代码 ProductScreenById：

import db from '../firebase'

export const ProjectScreenById = ({ match }) => {

    const pid = match.params.id

    return (
        <div>
            hello world
        </div>
    )
}

我的项目列表屏幕：

import db from '../firebase'
import { Row,Col,Spinner } from 'react-bootstrap'
import { Project } from '../components/Project'

export const ProjectScreen = () => {
    
    const [projects,setProjects] = useState([])

    useEffect(() =>{
        db.collection('projects').orderBy('index','asc').onSnapshot(snapShot => {
            setProjects(snapShot.docs.map(doc => ({id:doc.id,project:doc.data()})))
        })
    },[])

    const windowWidth = () => {
        const { innerWidth:width,innerHeight:height } = window;
        return { width,height }
    }
    
    return (<>
            {projects.length===0 ? 
                <div className='mt-5 pt-5'>
                    <Spinner animation='border' style={{ width:100,height:100 }}/> 
                </div>
                : (
                <Row style={{ overflowX: 'hidden',width:'100%' }} className='pl-5 pt-5'>
                    {projects.map(project => (
                        <Col key={project.project.index} className='mr-2 mb-5'>
                            <Project 
                                description={project.project.description.split('.')}
                                title={project.project.title}
                                features={project.project.features.split('.')}
                                git={project.project.git}
                                link={project.project.link}
                                index={project.project.index}
                                id={project.id}
                                stack={project.project.stack}
                          />
                        </Col>
                    ))}
                </Row>
                )}
        </>
    )
}

我的项目组件：

import React from 'react'
import { Card,Image } from 'react-bootstrap'
import { Link } from 'react-router-dom'

export const Project = ({ description,features,git,index,link,stack,title,id }) => {
    
    const images = [
        './images/ecom/display.png','./images/ytclone/display.png','./images/calculator/display.png','./images/todo/display.png','./images/expense/display.png',' ./images/techS/display.png','./images/tictactoe/display.png','./images/canvas/display.png','./images/linked/display.png'
    ]
    
    return (
        <Card className='py-3 px-5' style={{ height:'100%'}} sm={12}>
            <Image src={images[parseInt(index)]} style={{ width:'100%',border:'0.5px ridge rgb(219,219,219)' }} className='image' />
            <b>{title}</b>
            <div style={{ textAlign:'left' }} className='mb-2' >
                <b>Description:</b>
                {description.map(d=>(
                <li key={description.indexOf(d)}>{d}</li>
            ))}</div>
            <div style={{ textAlign:'left' }} className='mb-2' id='features'>
                <b>Features:</b>
                {features.map(f=>(
                    <li key={features.indexOf(f)}>{f}</li>
                ))}
            </div>
            <div style={{ textAlign:'left' }} className='mb-2' id='stack'>
                <b>Tech Stack:</b>
                {stack.map(s=>(
                    <li key={stack.indexOf(s)}>{s}</li>
                ))}
            </div>
            <div style={{ textAlign:'left' }} className='mb-2' id='git' >
                <b>Git Repo: </b>
                <a href={git.slice(0,5)==='https' ? git : '/projects'} target='_blank'>{git}</a>
            </div>
            <div style={{ textAlign:'left' }} className='mb-2' id='link' >
                <b>Project link: </b>
                <a href={link==='Upcoming' || link==='N/A' ? '/projects' : link}>{link}</a>
            </div>
            <Link to={`/projects/${id}`} className='view'><b>View Project & Project Details</b></Link>
        </Card>
    )
}

App.js：

import './App.css';
import { ContactScreen } from './screens/ContactScreen'
import { ProjectScreen } from './screens/ProjectScreen'
import { Header } from './components/Header'
import { Footer } from './components/Footer'
import { ProjectScreenById } from './screens/ProjectScreenById'
import { browserRouter as Router,Route } from 'react-router-dom'

function App() {

  return (
    <div className="App">
      <Header/>
      
      <Router>
  
          <Route path="/contact" component={ContactScreen} exact/>

          <Route path="/projects" component={ProjectScreen} exact />

          <Route path="/projects/:id" component={ProjectScreenById} exact/>

      
      </Router>
      
      <Footer/>
    </div>
  );
}
export default App;

解决方法

This answer 应该能帮到你，但在那之前，这里有一个使用 useLocation 的快速破解：

const location = useLocation()
const ID = location.pathname.split("/projects/")[1]