Me gustaría crear un patrón de URL compatible con SEO en el lado del cliente. La identificación de un artículo se obtiene del servidor buscando la identificación.
Me gustaría integrar el título del artículo en la URL del lado del cliente, para tener URL más amigables con SEO.
https://www.myurl.com/this-is-my-articles-name-854353
Eso significa que solo se debe considerar la última parte de la URL para obtener los datos correctamente del servidor. Todos los guiones anteriores deben ser ignorados.
¿Cómo puedo lograr esto usando React Router?
El siguiente ejemplo con el perfil de un usuario.
Así que básicamente la implementación es:
Y me gustaría adjuntar una cadena compatible con SEO. Eso significa que el enrutador solo debe considerar el "small_id", no la cadena anterior
https://myurl.com/proveedor/nombre-apellido-ubicación-otras-cosas-c0la
Aplicación.js
<Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/chats" element={<Chats />} /> <Route exact path="/profil" element={<Profile />} /> <Route path="/vendor/:small_id" element={<ViewProfile />} /> <Route exact path="/dashboard" element={<Dashboard />} /> <Route exact path="/verwaltung" element={<File />} /> </Routes>SearchResults.js (Esto enlaza con el perfil)
<div className="section-box profile" key={key} onClick={() => navigate('/vendor/' + user.small_id)}>ViewProfile.js (El perfil de los usuarios encontrados)
const { small_id } = useParams(); // Must match the pattern used in the router React.useEffect(() => { axios.get('/api/profiles/get/' + small_id) .then(res => { if (res.status === 200) { setProfile(res.data); } }) .catch(err => { //toast.error("Der Benutzer wurde nicht gefunden", { theme: 'colored' }); }) }, []);Así que cambiaría tu ruta a la siguiente:
<Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/chats" element={<Chats />} /> <Route exact path="/profil" element={<Profile />} /> <Route path="/vendor/:firstname-:lastname-:location-:moredata-:small_id" element={<ViewProfile />} /> <Route exact path="/dashboard" element={<Dashboard />} /> <Route exact path="/verwaltung" element={<File />} /> </Routes>Entonces reconstruiría su enlace para incluir esos:
<div className="section-box profile" key={key} onClick={() => navigate('/vendor/' + user.firstname + '-' + user.lastname + '-' + user.location + '-' + user.moredata + '-' + user.small_id)}>Lo siguiente debería seguir funcionando:
const { small_id } = useParams(); // Must match the pattern used in the router React.useEffect(() => { axios.get('/api/profiles/get/' + small_id) .then(res => { if (res.status === 200) { setProfile(res.data); } }) .catch(err => { //toast.error("Der Benutzer wurde nicht gefunden", { theme: 'colored' }); }) }, []);** ¡Tenga en cuenta que no he probado esto!
Investigué un poco y descubrí que React Router V6 ya no acepta parámetros opcionales. Así que se me ocurrió la siguiente solución:
<Route path="/vendor/:seo+:small_id" element={<ViewProfile />} />Eso significa que la ruta puede verse así: https://mywebsite.com/vendor/+843242
Y ":seo" es básicamente opcional. No necesita esto, si implementa el enrutamiento del servidor de esta manera:
const { small_id } = useParams(); // Must match the pattern used in the router React.useEffect(() => { axios.get('/api/profiles/get/' + small_id) .then(res => { if (res.status === 200) { setProfile(res.data); } }) .catch(err => { toast.error("Der Benutzer wurde nicht gefunden", { theme: 'colored' }); }) }, []);Por lo tanto, todo lo anterior a :+small_id se puede personalizar completamente con fines de SEO. Puedes enrutar lo que quieras del lado del cliente.
<div className="section-box profile" key={key} onClick={() => navigate('/vendor/' + user.firstname + "-" + user.lastname + "-" + user.workplaces + "+" + user.small_id)}>