Parameter in url not found

Question

I have the following URL for example: "http://localhost:3001/invoice/PfucXP7SGmReUxEBjE0Q". But the I can't get the parameter :invoiceId.

I use the following Link action to visit the page:

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

In my detail page I have:

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

    let {  invoiceId } = useParams();

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

The parameter invoiceId is printer as undefined.

My UserRoutes is setup as :

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

My router is setup as :

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

Code from my middleware looks like:

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

Anyone an idea why the invoiceId is not found?

Answer 1

Solved by adding the other variables by 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>
            );
        }
    }
    }
    />
);

Answer 2

It's always the little annoying details.. Remove the curly brackets (braces) in

let {  invoiceId } = useParams();

It should be

let invoiceId = useParams();