reactjs - React Router - 如何路由到循环中的特定路径

Question

我有点卡住了，找不到任何类似的问题。在我的应用程序中，我正在循环一些需要渲染的数据，但我不确定在这种情况下如何使用 react-router。我想访问该project.pathname字段以重定向到我的链接。但我很确定这是错误的方式。我的所有路线都已在我的App.js文件中定义，但如何在此处访问？

这是我的代码片段：

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import { Link } from 'react-router-dom'
    import { withStyles } from '@material-ui/core/styles'
    import Grid from '@material-ui/core/Grid'
    import Typography from '@material-ui/core/Typography'
    import Button from '@material-ui/core/Button'
    // import Staces from '../assets/staces.png'
    import SteffProject from '../assets/steffProject.jpg'
    import AxtradeProject from '../assets/axtradeProject.jpg'
    import HotspawtsProject from '../assets/hotspawtsProject.jpg'
    import IbizaProject from '../assets/ibizaProject.jpg'
    import CdaProject from '../assets/cdaProject.png'


    const projectImages = [
      {
        img: CdaProject,
        projectName: 'CARRE DARTISTES',
        headline: 'Artist’s shop Back office ',
        type: 'Web application',
        id: 1,
        pathname: '/AboutMe'
      },
      {
        img: IbizaProject,
        projectName: 'IBIZA',
        headline: 'Accounting Platform ',
        type: 'Web application',
        id: 2,
        pathname: '/Ibiza',
      },
      {
        img: SteffProject,
        projectName: 'STEFF',
        headline: 'Deliveries Management',
        type: 'Mobile application',
        id: 3,
        payhname: '/Steff',
      },
      {
        img: HotspawtsProject,
        projectName: 'HOTSPAWTS',
        headline: 'Dog Sitting Platform ',
        type: 'Mobile application',
        id: 4,
        pathname: '/Hotspawts',
      },
      {
        img: AxtradeProject,
        projectName: 'AXTRADE',
        headline: 'Brokers platform  ',
        type: 'Web application',
        id: 5,
        pathname: '/Axtrade',
      },
    ]
    @withStyles((theme) => ({ // eslint-disable-line
      projectPage: {
        marginTop: 5,
        backgroundColor: '#eee',
      },
      container: {
        position: 'relative',
      },
      projectImage: {
        width: '100%',
        height: 'auto',
        filter: 'grayscale(100%)',
      },
      title: {
        color: '#fff',
        position: 'absolute',
        top: 20,
        left: 10,
      },
      subheading: {
        color: '#fff',
        position: 'absolute',
        top: 40,
        left: 10,
      },
      caption: {
        color: '#fff',
        position: 'absolute',
        top: 60,
        left: 10,
      },
      display1: {
        textAlign: 'center',
        marginBottom: 20,
        marginTop: 20,
      },
      raised: {
        backgroundColor: '#424246',
        marginTop: 10,
        color: '#fff',
      },
      projectButton: {
        position: 'absolute',
        bottom: 10,
        right: 10,
        color: '#fff',
      },
    }))
    export default class Projects extends Component {
      static propTypes = {
        classes: PropTypes.any.isRequired, // eslint-disable-line
      }
      render() {
        const { classes } = this.props
        return (
          <Grid container className={classes.projectPage} alignItems="center" direction="column">
            <Grid item>
              <Typography className={classes.display1} variant="display1">Latest Projects</Typography>
            </Grid>
            <Grid item>
              {projectImages.map(project => (
                <div className={classes.container}>
                  <img
                    className={classes.projectImage}
                    key={project.id}
                    src={project.img}
                    alt={project.title}
                  />
                  <Typography
                    className={classes.title}
                    variant="title"
                  >
                    {project.projectName}
                  </Typography>
                  <Typography className={classes.subheading} variant="subheading">{project.headline}</Typography>
                  <Typography className={classes.caption} variant="caption">{project.type}</Typography>
                  <Button className={classes.projectButton} component={Link} to={project.pathname}>project details</Button>
                </div>
              ))}
            </Grid>
            <Grid item>
              <Button className={classes.raised} size="medium" variant="raised">View more projects</Button>
            </Grid>
          </Grid>
        )
      }
    }

标签： reactjsreact-router

Answer 1

你有错字

{
    img: SteffProject,
    projectName: 'STEFF',
    headline: 'Deliveries Management',
    type: 'Mobile application',
    id: 3,
    payhname: '/Steff',
}

应该是pathname。我相信您的代码在修复后应该可以工作。