Questions & Answers

I have some problem. I am trying to build routing to the device page by ID, but I get the error "No routes matched location "/device/1"". Image with error I attached the code below.

DeviceItem.js

const DeviceItem = ({device}) => {
    const navigate = useNavigate();

    const goToDevicePage = (id) => navigate(DEVICE_ROUTE + `/${id}`);

    return (
        <Col md={3} className="mt-3" onClick={() => goToDevicePage(device.id)}>
            <Card style={{width: 150, cursor: 'pointer'}} border={"light"}>
                <Image width={150} height={150} src={device.img}/>
                <div className="mt-1 d-flex justify-content-between align-items-center">
                    <div>Samsung...</div>
                    <div className="d-flex align-items-center">
                        <div>{device.rating}</div>
                        <span style={{width: 20, height: 20, fontSize: 15}}>&#9733;</span>
                    </div>
                </div>
                <div>{device.name}</div>
            </Card>
        </Col>
    );
};

export default DeviceItem;

consts.js

export const ADMIN_ROUTE = '/admin'
export const LOGIN_ROUTE = '/login'
export const REGISTRATION_ROUTE = '/registration'
export const SHOP_ROUTE = '/shop'
export const BASKET_ROUTE = '/basket'
export const DEVICE_ROUTE = '/device'

routes.js

export const authRoutes = [
    {
        path: ADMIN_ROUTE,
        Component: <Admin/>
    },
    {
        path: BASKET_ROUTE,
        Component: <Basket/>
    },
]

export const publicRoutes = [
    {
        path: SHOP_ROUTE,
        Component: <Shop/>
    },
    {
        path: LOGIN_ROUTE,
        Component: <Auth/>
    },
    {
        path: REGISTRATION_ROUTE,
        Component: <Auth/>
    },
    {
        path: DEVICE_ROUTE + ':/id',
        Component: <DevicePage/>
    },
]

AppRouter.js

const AppRouter = () => {
    const {user} = useContext(Context);

    return (
        <Routes>
            <Route path='/' element={<Shop/>}/>
            {user.isAuth && authRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={Component} />
            )}
            {publicRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={Component} />
            )}
        </Routes>
    );
};

export default AppRouter;

I use react-router-dom v6.

I'm tried replace value in navigate to REGISTRATION_ROUTE and it worked correctly.