未找到 url 中的参数答案

【问题标题】：Parameter in url not found未找到 url 中的参数
【发布时间】：2021-01-14 01:29:25
【问题描述】：

例如，我有以下 URL：“http://localhost:3001/invoice/PfucXP7SGmReUxEBjE0Q”。但是我无法获取参数：invoiceId。

我使用以下链接操作访问该页面：

<Link to={`/invoice/${transaction.uid}`} activeClassName="current">
<Button type="button" color="primary" className="btn-sm btn-rounded" onClick={() => {}}>
     View Details
</Button>
</Link>

在我的详细信息页面中，我有：

const InvoiceDetail = (props) => {
    const [chk1, setchk1] = useState(true);

    let {  invoiceId } = useParams();

    useEffect(() => {
        console.log(invoiceId);
    }, [props.success]);
}

参数 invoiceId 是未定义的打印机。

我的 UserRoutes 设置为：

const userRoutes = [
{ path: "/invoice/:invoiceId", component: InvoiceDetail },
];

我的路由器设置为：

return (
                <React.Fragment>
                <Router>
                    <Switch>
                        {authRoutes.map((route, idx) => (
                            <NonAuthmiddleware
                                path={route.path}
                                layout={NonAuthLayout}
                                component={route.component}
                                key={idx}
                            />
                        ))}

                        {userRoutes.map((route, idx) => (
                            <Authmiddleware
                                path={route.path}
                                layout={Layout}
                                component={route.component}
                                key={idx}
                            />
                        ))}

                    </Switch>
                </Router>
            </React.Fragment>
          );

我的中间件代码如下：

import React from "react";
import {Route, Redirect, withRouter} from "react-router-dom";

const Authmiddleware = ({
                            component: Component,
                            layout: Layout
                        }) => (
    <Route
        render={props => {
            if (props.location.pathname === "/checkout") {
                return (<Component {...props} />);
            } else {
                // here you can apply condition

                if (!localStorage.getItem("authUser")) {
                    return (
                        <Redirect to={{pathname: "/login", state: {from: props.location}}}/>
                    );
                }

                return (
                    <Layout>
                        <Component {...props} />
                    </Layout>
                );
            }
        }
        }
    />
);

export default withRouter(Authmiddleware);

有人知道为什么没有找到 invoiceId 吗？

【问题讨论】：

标签： reactjs react-router router

【解决方案1】：

通过rest添加其他变量来解决：

const Authmiddleware = ({
                            component: Component,
                            layout: Layout,
                            ...rest
                        }) => (
    <Route {...rest} render={props => {
        if (props.location.pathname === "/checkout") {
            return (<Component {...props} />);
        } else {
            // here you can apply condition

            if (!localStorage.getItem("authUser")) {
                return (
                    <Redirect to={{pathname: "/login", state: {from: props.location}}}/>
                );
            }

            return (
                <Layout>
                    <Component {...props} />
                </Layout>
            );
        }
    }
    }
    />
);

【讨论】：

【解决方案2】：

总是烦人的小细节..删除大括号（大括号）

let {  invoiceId } = useParams();

应该是

let invoiceId = useParams();

【讨论】：

感谢您的回答，但我仍然得到一个空的 {}
reactrouter.com/web/api/Hooks/useparams - 他们正在从对象中解构参数，删除大括号无济于事
您始终可以通过执行 console.log(props.match.params) 来检查参数是什么。你要找的参数应该是 props.match.params.invoiceId;
那个对象也是空的
我认为这是属性继承的问题。您在路由中使用了两个中间件，NonAuthmiddleware 和 Authmiddleware。如果您在适当的中间件中执行 console.log(props)，您应该会在 match.params 下看到所需的参数。您应该将路由参数传递给那里的子组件（即）。如果您需要帮助，请在您的答案中添加中间件中的代码。