React Router v4 – ¿Cómo obtener la ruta actual?

Me gustaría mostrar un title en que de alguna manera se transfiere desde la ruta actual.

En React Router v4, ¿cómo podría conseguir que la ruta actual pasara a su title ?

          

¿Hay alguna manera de pasar un título personalizado desde un elemento personalizado en ?

    Creo que el autor de React Router (v4) acaba de agregar eso conRouter HOC para apaciguar a ciertos usuarios. Sin embargo, creo que el mejor enfoque es usar render prop y hacer un componente PropsRoute simple que pase esos accesorios. Esto es más fácil de probar ya que no “conecta” el componente como lo haceRouter. Tenga un conjunto de componentes nesteds empaquetados conRouter y no va a ser divertido. Otro beneficio es que también puede usar este pase a través de los apoyos que desee en la Ruta. Aquí está el ejemplo simple usando render prop. (más o menos el ejemplo exacto de su sitio web https://reacttraining.com/react-router/web/api/Route/render-func ) (src / components / routes / props-route)

     import React from 'react'; import { Route } from 'react-router'; export const PropsRoute = ({ component: Component, ...props }) => (  () } /> ); export default PropsRoute; 

    uso: (aviso para obtener los params de ruta (match.params) puede usar este componente y los pasará por usted)

     import React from 'react'; import PropsRoute from 'src/components/routes/props-route'; export const someComponent = props => (); 

    También note que podría pasar cualquier accesorio extra que quiera de esta manera también

      

    En el router 4 de reacción, la ruta actual está en – this.props.location.pathname . Acaba de obtener this.props y verificar. Si aún no ves location.pathname entonces debes usar el decorador withRouter .

    Esto podría verse más o menos así:

      import {withRouter} from 'react-router-dom'; ... const SomeComponent = withRouter(props => ); class MyComponent extends React.Component { ... SomeMethod () { const {pathname} = this.props.location; ... } ... } 

    Si está utilizando las plantillas de reactjsr, donde el final de su archivo de reacción se ve así: export default SomeComponent usted Necesita usar el componente de orden superior, withRouter .

    Primero, deberá importar withRouter: import {withRouter} from 'react-router-dom';

    Luego, querrás usar withRouter. Puede hacerlo cambiando la exportación de sus componentes … desde export default ComponentName para export default withRouter(ComponentName) .

    Luego puede obtener la ruta (y otra información) desde el interior de los accesorios. Específicamente, location , match e history . El código para escupir la ruta de acceso sería console.log(this.props.location.pathname);

    Un buen informe está disponible aquí: https://reacttraining.com/react-router/core/guides/philosophy