未找到 url 中的参数

Question

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

我使用以下 Link 操作访问页面：

<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 吗？

Answer 1

总是烦人的小细节..去掉

中的花括号（大括号）

let {  invoiceId } = useParams();

应该是

let invoiceId = useParams();

Answer 2

通过添加其他变量解决：

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>
            );
        }
    }
    }
    />
);

未找到 url 中的参数

Parameter in url not found

router

reactjs

react-router