Wykryj zmianę trasy z routerem reagującym

Question

Muszę zaimplementować logikę biznesową w zależności od historii przeglądania.

Co chcę zrobić coś takiego:

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

Czy jest jakiś sposób, aby otrzymać zwrotnego od reagują-routera, gdy adres URL jest aktualizowany?

Answer 1

Podczas próby wykrycia zmiany trasy można skorzystać z funkcji history.listen(). Biorąc pod uwagę, że używasz react-router v4, owinąć swój komponent przy pomocy withRouter HOC, aby uzyskać dostęp do podpory history.

history.listen() zwraca funkcję unlisten. Używałbyś tego do słuchania przez unregister.

Można skonfigurować swoje trasy jak

index.js

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

a następnie w 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); 

Z historii docs:

Można słuchać zmian w bieżącej lokalizacji z wykorzystaniem 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}`) 
}) 

Przedmiotem lokalizacja realizuje podzbiór interfejsu window.location , w tym:

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

Lokalizacje mogą także mają następujące właściwości:

location.state - Niektórzy dodatkowo stan w tym miejscu, które nie mieszkają w adresie URL (obsługiwane w createBrowserHistory i createMemoryHistory)

location.key - unikalny ciąg znaków reprezentujący tę lokalizację (obsługiwanego w createBrowserHistory i createMemoryHistory)

Akcja jest jeden z PUSH, REPLACE, or POP w zależności od tego, jak użytkownik dotarł do bieżącego adresu URL.

Kiedy używasz reagować-Router v3 można wykorzystać history.listen() z history pakietu jak wspomniano powyżej lub można również skorzystać browserHistory.listen()

Można skonfigurować i używać swoje trasy jak

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

Jeśli chcesz posłuchać obiektu history na całym świecie, musisz go utworzyć samodzielnie i przekazać go do Router.Następnie można słuchać z listen() metody:

// 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> 

Nawet lepiej, jeśli utworzyć obiekt historii jako moduł, dzięki czemu można łatwo zaimportować go gdziekolwiek jest to potrzebne (np import history from './history';