reactjs - name - React Router v4-¿Cómo obtener la ruta actual?

redirect react router v4

Question

Me gustaría mostrar un title en <AppBar /> que de alguna manera se pasa de la ruta actual.

En React Router v4, ¿cómo podría <AppBar /> hacer pasar la ruta actual a su accesorio de title ?

  <Router basename=''/app''>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title=''Test'' />
      <Route path=''/customers'' component={Customers} />
    </main>
  </Router>

¿Hay alguna manera de pasar un título personalizado desde un prop personalizado en <Route /> ?

Answer 1

Creo que el autor de React Router (v4) acaba de agregar eso con Router 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 hace withRouter. Tenga un montón de componentes anidados envueltos con Router y no va a ser divertido. Otro beneficio es que también puede usar este pase a través de los accesorios que desee para 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 }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

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

import React from ''react'';
import PropsRoute from ''src/components/routes/props-route'';

export const someComponent = props => (<PropsRoute component={ Profile } />);

También tenga en cuenta que también puede pasar cualquier accesorio adicional que desee de esta manera

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

Answer 2

En el router de reacción 4, la ruta actual está en this.props.location.pathname . Solo obtén this.props y this.props . Si aún no ve location.pathname entonces debe usar el decorador con withRouter .

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

import {withRouter} from ''react-router-dom'';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

Answer 3

Si está utilizando plantillas de react, donde el final de su archivo de reacción se ve así: export default SomeComponent , necesita usar el componente de orden superior (a menudo denominado "HOC"), withRouter .

Primero, deberá importar con withRouter así:

import {withRouter} from ''react-router-dom'';

A continuación, querrá usar con withRouter . Puede hacerlo cambiando la exportación de su componente. Es probable que desee cambiar de export default ComponentName a export default withRouter(ComponentName) .

Luego puede obtener la ruta (y otra información) de los accesorios. Específicamente, location , match e history . El código para escupir el nombre de ruta sería:

console.log(this.props.location.pathname);

Una buena reseña con información adicional está disponible aquí: https://reacttraining.com/react-router/core/guides/philosophy