[Dúvida] Gostaria de saber o por que do path="*" e não "/"?

Olá, Guilherme!

O path="*" é utilizado no React Router para definir uma rota que será ativada quando nenhuma outra rota definida corresponder à URL atual. Isso é útil para lidar com situações em que o usuário tenta acessar uma rota que não existe em sua aplicação, permitindo que você mostre uma página de erro personalizada, por exemplo. Vamos pensar em um site como o GitHub, concorda que lá temos uma infinidade de rotas? Por exemplo, para encontrar um usuário, basta colocar assim: "https://github.com/NOMEDOUSUARIO". Quando não encontrar, sempre vai cair em uma rota/página personalizada por eles.

No seu código/aula que você compartilhou, a rota com path="*" está sendo usada para renderizar um componente PaginaPadrao para todas as rotas que não foram correspondidas por outras rotas definidas anteriormente.

Um exemplo prático para entender melhor. Suponha que sua aplicação tenha as seguintes rotas definidas:

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/sobre" element={<Sobre />} />
    <Route path="*" element={<PaginaPadrao />} />
</Routes>

Se o usuário acessar a URL /, a rota correspondente é a primeira e o componente Home será renderizado. Se o usuário acessar a URL /sobre, a rota correspondente é a segunda e o componente Sobre será renderizado. Agora, se o usuário tentar acessar uma URL que não foi definida ou não existe, como /contato, nenhuma das duas primeiras rotas corresponderá a essa URL. Nesse caso, a rota com path="*" será ativada e o componente PaginaPadrao será renderizado, sendo assim ela é um "carta coringa" graças a essa versatilidade.

Espero que essa explicação tenha lhe ajudado ao menos um pouco com essa questão.

Sucesso ✨

Um grande abraço e até mais!

De acordo com o código fornecido, há uma utilização desnecessária do asterisco (*) em uma das rotas.

Ao usar o asterisco (*), estamos indicando que essa rota deve corresponder a qualquer caminho que não foi correspondido por outras rotas definidas. Isso é comumente usado para configurar uma página de "não encontrada" (not found) ou uma página padrão que será exibida quando nenhum outro caminho corresponder.

No entanto, neste contexto específico, o código já está tratando explicitamente o caso em que o post não é encontrado e renderizando . Portanto, não há necessidade de usar o asterisco (*) aqui.

Em vez disso, faz mais sentido usar uma rota mais específica, como "/", que é o ponto de entrada principal para o componente Post. Isso torna o código mais claro e alinhado com a lógica que está sendo implementada, evitando ambiguidades e possíveis confusões futuras.

Portanto, para corrigir esse problema, sugiro substituir path="*" por path="/". Isso garantirá que a rota principal para o componente Post seja claramente definida e que a página de "não encontrada" seja renderizada apenas quando o caminho não corresponder a nenhum post existente.

import './Post.css';
import styles from './Post.module.css';

import { Route, Routes, useParams } from "react-router-dom"
import posts from "json/posts.json";
import PostModelo from "componentes/PostModelo";
import ReactMarkdown from "react-markdown";
import NaoEncontrada from 'paginas/NaoEncontrada';
import PaginaPadrao from 'componentes/PaginaPadrao';
import PostCard from 'componentes/PostCard';

export default function Post() {
    const parametros = useParams();

    const post = posts.find((post) => {
        return post.id === Number(parametros.id);
    })

    if (!post) {
        return <NaoEncontrada />
    }

    const postsRecomendados = posts
        .filter((post) => post.id !== Number(parametros.id))
        .sort((a, b) => b.id - a.id)
        .slice(0, 4);

    return (
        <Routes>
            <Route path="*" element={<PaginaPadrao />}>
                <Route index element={
                    <PostModelo
                        fotoCapa={`/assets/posts/${post.id}/capa.png`}
                        titulo={post.titulo}
                    >
                        <div className="post-markdown-container">
                            <ReactMarkdown>
                                {post.texto}
                            </ReactMarkdown>
                        </div>

                    <h2 className={styles.tituloOutrosPosts}>
                        Outros posts que você pode gostar:
                    </h2>

                    <ul className={styles.postsRecomendados}>
                        {postsRecomendados.map((post) => (
                            <li key={post.id}>
                                <PostCard post={post} />
                            </li>
                        ))}
                    </ul>

                    </PostModelo>
                } />
            </Route>
        </Routes>

    )
}