He escrito un componente

 import { useState, useEffect } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; import colors from "../../utils/styles/colors"; import { ThemeContext } from "../../utils/contexte"; function Profile() { const { id: queryId } = useParams(); const [profileData, setProfileData] = useState({}); useEffect(() => { fetch(`http://localhost:8000/freelance?id=${queryId}`) .then((response) => response.json()) .then((jsonResponse) => { setProfileData(jsonResponse?.freelaneData); }); }, [queryId]); const { picture, name, location, tjm, job, skills, available, id } = profileData;

Estoy usando esta ruta en mi index.js:

 <Route path="/profile/:id" render={(props) => <Profile {...props} />}

Pero, la advertencia que recibo es:

index.tsx:25 La ruta hoja coincidente en la ubicación "/profile/1" no tiene ningún elemento. Esto significa que generará un valor nulo de forma predeterminada, lo que dará como resultado una página "vacía".