将 ID 更改为其他字符串时链接 URL 中断

我在 URL 示例 service-detail/1 中有 ID ，该 ID 工作正常，后来我将路由重定向到 service-detail/abc ，但该 url 不起作用，我不确定错误是什么

我得到的路线像

<Route  path={`${process.env.PUBLIC_URL + "/service"}`}
                            element={<ServicePage />}
                        />
                        <Route
                            path={`${
                                process.env.PUBLIC_URL +
                                "/service-details/:title"
                            }`}
                            element={<ServiceDetails />}
                        />

在控制台中我收到以下错误

Uncaught TypeError: Cannot read properties of undefined (reading 'bodyBottom')
    at ServiceDetailsContainer (index.jsx:26:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
react-dom.development.js:20085 The above error occurred in the <ServiceDetailsContainer> component:

    at ServiceDetailsContainer (http://localhost:3000/static/js/bundle.js:10955:5)
    at div
    at Layout (http://localhost:3000/static/js/bundle.js:12287:5)
    at ServiceDetails (http://localhost:3000/static/js/bundle.js:14746:67)
    at Routes (http://localhost:3000/static/js/bundle.js:60539:5)
    at NavScrollTop (http://localhost:3000/static/js/bundle.js:4067:51)
    at Wrapper (http://localhost:3000/static/js/bundle.js:4141:78)
    at Router (http://localhost:3000/static/js/bundle.js:60472:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:59948:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of undefined (reading 'bodyBottom')
    at ServiceDetailsContainer (index.jsx:26:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

所以我看到错误在 ServiceDetailsContainer 中，但我找不到它

import React from "react";
import PropTypes from "prop-types";
import ServiceDetails from "../../../components/service-details";
import ServiceCate from "../../../components/sidebar/service-cate";
import ServiceData from "../../../data/service.json";
import Brochure from "../../../components/sidebar/brochure";

const ServiceDetailsContainer = ({ data }) => {
    return (
        <div className="single-service section-py">
            <div className="container">
                <div className="row">
                    <div className="col-lg-8">
                        <ServiceDetails data={data} />
                    </div>
                    <div className="col-xl-3 col-lg-4 offset-xl-1">
                        <div className="sidbar-widget float-start w-100">
                            <ServiceCate data={ServiceData} />
                        </div>
                        <div className="sidbar-widget float-start w-100 mt-10 mb-10">
                            <Brochure />
                        </div>
                    </div>
                </div>
                <div className="col-12">
                    <p>{data.bodyBottom}</p>
                </div>
            </div>
        </div>
    );
};

ServiceDetailsContainer.propTypes = {
    data: PropTypes.object,
};

export default ServiceDetailsContainer;

Json 文件

"id": 1,
        "icon": "./images/service/icon/1.png",
        "smallIcon": "/images/service/icon/small/1.png",
        "image": "./images/service/3.png",
        "title": "Banking",
        "categories": [
            "Digital ",           
        ],
        "excerpt": "Account Opening 

对于 URL 路径"/service-detail/abc" the titleparam 不是数字，所以const serviceId = parseInt(title, 10);转换为数字类型失败。对于 id 类型值，您通常希望采用其他方式并转换为字符串以进行严格相等检查。

Example:

const { title } = useParams(); // <-- params are always string type
const data = ServiceData.filter((service) => String(service.id) === title);

奥菲克，你could也使用松散相等（==）它将尝试进行类型转换以进行比较。

const { title } = useParams(); // <-- params are always string type
const data = ServiceData.filter((service) => service.id == title);

console.log(1 === '1');         // false
console.log(String(1) === '1'); // true
console.log(1 == '1');          // true

See 平等比较和相同以获得更深入的解释。

另外，因为完全有可能data过滤后的数组结果为空数组，即未找到匹配项，UI 代码应处理这种情况并有条件地呈现一些后备 UI，而不是尝试访问 null/未定义的数据对象，因为它不存在。