Cada objeto en el que haga clic me dará este enlace: http://localhost:3000/edit/$%7Buser.id%7D

Se supone que debe dar una identificación de cada objeto en el que hago clic, pero no lo hace.

Lista de usuario.js

 import React, { useContext} from 'react'; import { GlobalContext } from '../context/GlobalState'; import { Link } from 'react-router-dom'; import { ListGroup, ListGroupItem, Button } from 'reactstrap'; export const UserList = () => { const { users } = useContext(GlobalContext); return ( <ListGroup className='mt-3'> {users.map(user => ( <ListGroupItem > <strong>{user.name}</strong> <div style={{ float: "right"}}> <Link className='btn btn-warning mr-1' to={'/edit/${user.id}'}>Edit</Link> <Button color='danger' style={{ marginLeft: "10px"}}>Delete</Button> </div> </ListGroupItem> ))} </ListGroup> ) }

GlobalState.js

 import React, { createContext, useReducer} from 'react'; import AppReducer from './AppReducer'; // Inisial State const initialState = { users: [ {id: 1, name: 'user one'}, {id: 2, name: 'user two'}, {id: 3, name: 'user three'} ] }; export const GlobalContext = createContext(initialState); // Provider Component export const GlobalProvider = ({children}) => { const [state, dispatch] = useReducer(AppReducer, initialState); return ( <GlobalContext.Provider value={{ users: state.users }}> {children} </GlobalContext.Provider> ) }

El error:

¿Qué salió mal por esto?