reactjs - doom - router example react

Detectar el cambio de ruta con react-router

Question

Tengo que implementar alguna lógica de negocios dependiendo del historial de navegación.

Lo que quiero hacer es algo como esto:

reactRouter.onUrlChange(url => {
   this.history.push(url);
});

¿Hay alguna forma de recibir una devolución de llamada de react-router cuando la URL se actualiza?

Answer 1

Puede utilizar la función history.listen() cuando intente detectar el cambio de ruta. Teniendo en cuenta que está utilizando react-router v4 , envuelva su componente con withRouter HOC para obtener acceso al history .

history.listen() devuelve una función unlisten . Usaría esto para unregister de la escucha.

Puedes configurar tus rutas como

index.js

ReactDOM.render(
      <BrowserRouter>
            <AppContainer>
                   <Route exact path="/" Component={...} />
                   <Route exact path="/Home" Component={...} />
           </AppContainer>
        </BrowserRouter>,
  document.getElementById(''root'')
);

y luego en AppContainer.js

class App extends Component {

  componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      console.log("on route change");
    });
  }
  componentWillUnmount() {
      this.unlisten();
  }
  render() {
     return (
         <div>{this.props.children}</div>
      );
  }
}
export default withRouter(App);

De los docs historia:

Puedes escuchar los cambios en la ubicación actual usando history.listen :

history.listen((location, action) => {
      console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
  console.log(`The last navigation action was ${action}`)
})

El objeto de ubicación implementa un subconjunto de la interfaz window.location, que incluye:

**location.pathname** - The path of the URL
**location.search** - The URL query string
**location.hash** - The URL hash fragment

Las ubicaciones también pueden tener las siguientes propiedades:

location.state : un estado adicional para esta ubicación que no reside en la URL (compatible con createBrowserHistory y createMemoryHistory )

location.key - Una cadena única que representa esta ubicación (compatible con createBrowserHistory y createMemoryHistory )

La acción es PUSH, REPLACE, or POP según cómo haya llegado el usuario a la URL actual.

Cuando esté utilizando react-router v3, puede hacer uso de history.listen() del paquete de history como se mencionó anteriormente o también puede usar browserHistory.listen()

Puedes configurar y utilizar tus rutas como

import {browserHistory} from ''react-router'';

class App extends React.Component {

    componentDidMount() {
          this.unlisten = browserHistory.listen( location =>  {
                console.log(''route changes'');

           });

    }
    componentWillUnmount() {
        this.unlisten();

    }
    render() {
        return (
               <Route path="/" onChange={yourHandler} component={AppContainer}>
                   <IndexRoute component={StaticContainer}  />
                   <Route path="/a" component={ContainerA}  />
                   <Route path="/b" component={ContainerB}  />
            </Route>
        )
    }
} 

Answer 2

Si desea escuchar el objeto history nivel mundial, tendrá que crearlo usted mismo y pasarlo al Router . Luego puedes escucharlo con su método listen() :

// Use Router from react-router, not BrowserRouter.
import { Router } from ''react-router'';

// Create history object.
import createHistory from ''history/createBrowserHistory'';
const history = createHistory();

// Listen to history changes.
// You can unlisten by calling the constant (`unlisten()`).
const unlisten = history.listen((location, action) => {
  console.log(action, location.pathname, location.state);
});

// Pass history to Router.
<Router history={history}>
   ...
</Router>

Aún mejor si crea el objeto histórico como un módulo, de modo que puede importarlo fácilmente en cualquier lugar que lo necesite (por ejemplo, import history from ''./history'';