Aquí está el componente de la aplicación:
return (
<BrowserRouter>
<div className="flex border-2 border-grey flex-col max-w-4xl min-h-screen mx-auto">
<Navigation />
<MainContainer>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route>
<CreateBlog path="/create" />
</Route>
<Route>
<FullBlogDetails path="/blogs/:id" />
</Route>
</Switch>
</MainContainer>
</div>
</BrowserRouter>
);
}
El problema es que cada vez que hago clic en un blog, me redirige a "/create" , en lugar de "/blogs/:id" .
Aquí está el Link que hace la navegación:
<Link
to={`/blogs/${id}`}
key={id}
className="p-4 flex border-2 border-grey-200 items-center hover:shadow-lg my-6"
>
<div>
<img className="h-20" src={picture} />
<p className="">
Written by{" "}
<span className="text-rose-500 font-bold text-lg">
{firstName + " " + lastName}
</span>
</p>
</div>
<p className="font-bold">"{title}..."</p>
</Link>
La parte extraña es que si cambio la Route "/create" con la Route "/blogs/:id" , convirtiéndola en la tercera, la aplicación solo muestra "/blogs/:id" y luego "/create" no se muestra. ahora. Básicamente, la tercera ruta no funciona.
Ha colocado incorrectamente la propiedad de path para las rutas en el componente enrutado en lugar del componente Route . El componente Switch solo representa la primera Route o Redirect coincidente, por lo que una Route sin la propiedad de path siempre coincidirá. Dado que a la ruta tanto para "/create" como para "/blogs/:id" le falta la propiedad de path , tiene sentido que intercambiar su orden e intentar navegar hasta la segunda aún coincida y represente la primera.
Mueva la propiedad de path al componente Route . También sugiero ordenar las rutas en orden inverso a la especificidad de la ruta para que las rutas más específicas se representen antes que las rutas menos específicas. Esto generalmente omite la necesidad de especificar la propiedad exact .
Ejemplo:
<BrowserRouter>
<div className="flex border-2 border-grey flex-col max-w-4xl min-h-screen mx-auto">
<Navigation />
<MainContainer>
<Switch>
<Route path="/create"> // <-- path on route
<CreateBlog />
</Route>
<Route path="/blogs/:id"> // <-- path on route
<FullBlogDetails />
</Route>
<Route path="/"> // <-- path on route
<Home />
</Route>
</Switch>
</MainContainer>
</div>
</BrowserRouter>