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

Question

我在 URL 示例 service-detail/1 中有 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 (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 (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

Answer 1

对于 URL 路径 "/service-detail/abc"，title 参数不是数字，因此 const serviceId = parseInt(title, 10); 无法转换为数字类型。对于 id 类型值，您通常希望采用另一种方式并转换为字符串以进行严格的相等性检查。

示例：

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

OFC，你可以也使用松散相等（==），它会尝试进行类型转换以进行比较。

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

请参阅 Equality comparison and sameness 以获得更多 in-depth 解释。

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

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

Link URL Breaking while changing ID to some other string

reactjs

react-router