React-Router params not working as expected returns param name if no value passed

Question

This is how I'm assigning routes.

Routes = [
{
    path: "/Hibachi/:id?",
    component: HibachiGrill,
    title: "Hibachi",
    icon: <TableOutlined />,
    exact: true,
  },
{
    path: "/Barfloor",
    component: BarFloor,
    title: "Barfloor",
    icon: <RiDashboardFill />,
    exact: true,
  },
];

I'm calling the routes like this.

       <LayoutAnt className="content">
          <Switch>
            {Routes.map((route, index) => (
              <Route
                key={index}
                exact={route.exact}
                path={route.path}
                component={route.component}
              />
            ))}
          </Switch>
        </LayoutAnt>

My question is when I don't pass any parameter in the hibachi component I get this as result :id I have tried putting a ? but I'm still facing the same problem.

Lavish Kumar · Accepted Answer · 2021-06-18 17:22:31Z

1

It Works fine just see this sandbox Simple routing with your routes.

Also as you didn't mention how you access the parameters, i suppose you didn't use he useParams hook, that's why you might be getting unwanted props in your component.

answered Jun 18, 2021 at 17:22

Lavish Kumar

1365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Router params not working as expected returns param name if no value passed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related