Typescript - Left side of comma operator is unused and has no side effects - How to use constants in place of strings in hookrouter's route?

Question

import React from "react";
import Users from "./components/Users";
import Contact from "./components/Contact";
import About from "./components/About";
const routes = {
  "/": () => <Users />,
  "/about": () => <About />,
  "/contact": () => <Contact />
};
export default routes;

May I know how to use constants instead of strings in the routes as follows please?

const root = "/";

const routes = {
  `${root}`: () => <Users />,
};

When I tried the code above, I got the following error:

Left side of comma operator is unused and has no side effects

Seem

What if you put parentheses around the JSX? – Triangular

@Triangular Could you let me know where exactly please? – Seem

Exactly "around the JSX", () => (<Users />),. – Triangular

@Triangular ${root}`: () => (<Users />), Still I get the same error – Seem

Answer 1

The syntax for a computed property name in an object literal is [someExpression], not `${someExpression}`:

const root = "/";

const routes = {
  [root]: () => <Users />,
};

[Playground Link]

Chane

Answer 2

Got the issue when I was using an arrow function by returning a key value pair object , below is the code when issue occurred

const methodTest = (value) => { key1 : value,key2:value };

The solution is to add a () around the braces {} . Below is the solution for the above issue

const methodTest = (value) => ({key1:value , key2:value });

The fix is to wrap the object literal in parentheses

Landon