React Link - TypeError：无法读取未定义的属性（读取“路径名”）

Question

我想在我的首页添加几个信息部分，每个部分都有一个链接到我网站上相关页面的按钮。 我没有编写一个包含所有部分（将有 4 个或 5 个）的非常大的 InfoSection 组件，而是尝试在 InfoSection 组件中仅编写一个部分“模板”，并使用 Data.js 文件，其中每个对象都包含有关信息每个部分，然后将它们显示在主页上，如下所示：

<InfoSection {...homeObjOne}/>
<InfoSection {...homeObjTwo}/>
<InfoSection {...homeObjThree}/>

然后我尝试在 Data.js 的每个对象中传递每个页面链接，但是每当我单击它时，我都会收到 TypeError: Cannot read properties of undefined (reading 'pathname') 我假设我对 Data.js 对象中的“buttonLabel”组件做错了。我该怎么做才能让它发挥作用？

如果我去掉那个 'buttonLabel' 并在 index.js (<Button to='page1'>) 的 <Button> 组件中添加一个 to='page1'，按钮就可以工作，但这意味着每个部分都链接到同一个页面并且我需要每个按钮链接到不同的页面...

代码如下（目前仅使用2个部分，链接到page1和page2）

InfoSection 组件中的 Data.js

import React from 'react';
import { Link } from 'react-router-dom';
export const homeObjOne = {
    description: <p>page 1</p>,
    buttonLabel: <Link to="page1" target='_blank' style={{ textDecoration: 'none' }}>Go to page 1</Link>
};
export const homeObjTwo = {
    description: <p>page 2</p>,
    buttonLabel: <Link to="page2" target='_blank' style={{ textDecoration: 'none' }}>Go to page 2</Link>
};

InfoSection 组件的index.js

import React, { useState, useEffect} from 'react';
import { Button } from '../ButtonElements';
import { InfoContainer, InfoWrapper, InfoRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, BtnWrap, ImgWrap, Img  } from './InfoElements';
import VizSensor from 'react-visibility-sensor';
import { Fade } from '@mui/material';

const InfoSection = ({lightBg, id, imgStart, topLine, lightText, headline,darkText, description, buttonLabel, img, alt, primary, dark, dark2}) => {

    let [active, setActive] = useState(false);

    return (
        <>
            <InfoContainer lightBg={lightBg} id={id}>
                <InfoWrapper>
                    <InfoRow imgStart={imgStart}>
                        <Column1>
                            <VizSensor onChange={(isVisible) => {
                                        if(isVisible){
                                            setActive(isVisible);
                                        }
                                        }}
                            >
                                <Fade in={active} timeout={1000} >
                                    <TextWrapper>
                                        <TopLine>{topLine}</TopLine>
                                        <Fade in={active} timeout={1000} style={{ transitionDelay: `400ms` }}>
                                            <Heading lightText={lightText}>{headline}</Heading>
                                        </Fade>
                                        <Fade in={active} timeout={1000} style={{ transitionDelay: `800ms` }}>
                                            <Subtitle darkText={darkText}>{description}</Subtitle>
                                        </Fade>
                                        <BtnWrap>
                                            <Button
                                            smooth={true}
                                            duration={500}
                                            spy={true}
                                            exact="true"
                                            offset={-80}
                                            primary={primary ? 1 : 0}
                                            dark={dark ? 1: 0}
                                            dark2={dark2 ? 1 : 0}
                                            >{buttonLabel}</Button>
                                        </BtnWrap>
                                    </TextWrapper>
                                </Fade>
                            </VizSensor>
                        </Column1>
                        <Column2>
                            <ImgWrap>
                                <Img src={img} alt={alt}/>
                            </ImgWrap>
                        </Column2>
                    </InfoRow>
                </InfoWrapper>
            </InfoContainer> 
        </>
    )
}

export default InfoSection

ButtonElements.js 文件：

import styled from "styled-components";
import { Link } from "react-router-dom";


export const Button = styled(Link)`
    border-radius: 50px;
    background: ${({primary}) => (primary ? '#F59AA6' : '#010606')};
    white-space: nowrap;
    padding: ${({fontBig}) => (fontBig ? '20px' : '16px')};
    outline: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    transition: all 0.2s ease-in-out;

    &:hover {
        transition: all 0.2s ease-in-out;
        background: ${({primary}) => (primary ? '#fff' : '#F59AA6')};
    }
`

Answer 1

每个Button 组件已经是一个链接，因此您实际上是在链接中放置一个链接，或者更准确地说，一个锚点<a> 标记在一个锚标记中，这不是有效的 HTML。 buttonLabel 几乎可以是任何可渲染的东西，除了另一个链接。

我建议将链接道具放在Button 并让buttonLabel 返回按钮/链接文本。

export const homeObjOne = {
  description: <p>page 1</p>,
  buttonLabel: "Go to page 1"
};

export const homeObjTwo = {
  description: <p>page 2</p>,
  buttonLabel: "Go to page 2"
};

...

<BtnWrap>
  <Button
    smooth
    duration={500}
    spy
    exact
    offset={-80}
    primary={primary ? 1 : 0}
    dark={dark ? 1: 0}
    dark2={dark2 ? 1 : 0}
    to="page2"      // <-- link props here
    target='_blank' // <-- link props here
  >
    {buttonLabel}
  </Button>
</BtnWrap>

将按钮/链接文本装饰 CSS 移动到 Button 组件。

export const Button = styled(Link)`
  border-radius: 50px;
  background: ${({ primary }) => (primary ? '#F59AA6' : '#010606')};
  white-space: nowrap;
  padding: ${({ fontBig }) => (fontBig ? '20px' : '16px')};
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  transition: all 0.2s ease-in-out;
  textDecoration: none; // <-- text decoration here

  &:hover {
    transition: all 0.2s ease-in-out;
    background: ${({ primary }) => (primary ? '#fff' : '#F59AA6')};
  }
`;