¿Hay alguna forma de modificar el título de la página con React-Router v4+?

Esta crónica fue aprobado por nuestros expertos para asegurar la exactitud de este enunciado.

Solución:

los componentes tienen propiedad de renderizado. Entonces puede modificar el título de la página cuando cambia la ubicación declarando sus rutas así:

 (
    
  )
/>

 (
    
  )
/>

En Page componente puede establecer el título de la ruta:

import React from "react"

/* 
 * Component which serves the purpose of a "root route component". 
 */
class Page extends React.Component 
  /**
   * Here, we define a react lifecycle method that gets executed each time 
   * our component is mounted to the DOM, which is exactly what we want in this case
   */
  componentDidMount() 
    document.title = this.props.title
  
  
  /**
   * Here, we use a component prop to render 
   * a component, as specified in route configuration
   */
  render() 
    const PageComponent = this.props.component

    return (
      
    )
  


export default Page

Actualización 1 de agosto de 2019. Esto solo funciona con react-router >= 4.x. Gracias a @supreme being7

Respuesta actualizada usando React Hooks:

Puede especificar el título de cualquier ruta usando el componente a continuación, que se construye usando useEffect.

import  useEffect  from "react";

const Page = (props) => 
  useEffect(() => , [props.title]);
  return props.children;
;

export default Page;

y luego usar Page en el render prop de una ruta:

 (
    
      
    
  )
/>

 (
    
      
    
  )
/>

En tus componentDidMount() método hacer esto para cada página

componentDidMount() 
  document.title = 'Your page title here';

Esto cambiará el título de su página, haga lo mencionado anteriormente para cada ruta.

Además, si es más que solo la parte del título, verifique react-helmet Es una biblioteca muy ordenada para esto, y también maneja algunos casos de borde agradables.

Usando un componente funcional en su página de enrutamiento principal, puede hacer que el título cambie en cada cambio de ruta con useEffect.

Por ejemplo,

const Routes = () => 
    useEffect(() => 
      let title = history.location.pathname
      document.title = title;
    );

    return (
      
        
        
        
      
    );

Puedes avalar nuestra investigación añadiendo un comentario o dejando una puntuación te damos la bienvenida.

---

---

Utiliza Nuestro Buscador