Phát hiện thay đổi tuyến đường bằng bộ phản ứng-router

Question

Tôi phải triển khai một số logic nghiệp vụ tùy thuộc vào lịch sử duyệt web.

một cái gì đó như thế này Những gì tôi muốn làm là:

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

Có cách nào để nhận được một cuộc gọi lại từ phản ứng-router khi URL được cập nhật?

Answer 1

Bạn có thể sử dụng chức năng history.listen() khi cố gắng phát hiện thay đổi tuyến đường. Xem xét bạn đang sử dụng react-router v4, hãy bọc thành phần của bạn với withRouter HOC để truy cập vào số history chống đỡ.

history.listen() trả về hàm unlisten. Bạn sẽ sử dụng điều này để nghe số unregister.

Bạn có thể cấu hình các tuyến của bạn như

index.js

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

và sau đó trong 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); 

Từ lịch sử docs:

Bạn có thể nghe thay đổi đối với vị trí hiện tại sử dụng 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}`) 
}) 

Đối tượng vị trí thực hiện một tập hợp con của giao diện window.location , bao gồm:

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

Địa điểm cũng có thể có các thuộc tính sau:

location.state - Một số nhà nước bổ sung cho vị trí này mà không thường trú tại địa chỉ URL (được hỗ trợ trong createBrowserHistory và createMemoryHistory)

location.key - Một chuỗi duy nhất đại diện cho vị trí này (được hỗ trợ trong createBrowserHistory và createMemoryHistory)

Hành động đó là một trong số PUSH, REPLACE, or POP tùy thuộc vào cách người dùng truy cập URL hiện tại.

Khi bạn đang sử dụng phản ứng-router v3 bạn có thể tận dụng history.listen() từ history gói như đã đề cập ở trên hoặc bạn cũng có thể tận dụng browserHistory.listen()

Bạn có thể cấu hình và sử dụng các tuyến đường của bạn như

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

Nếu bạn muốn nghe đối tượng history trên toàn cầu, bạn sẽ phải tự tạo nó và chuyển nó đến Router.Sau đó, bạn có thể nghe nó với listen() phương pháp của nó:

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

Thậm chí tốt hơn nếu bạn tạo đối tượng lịch sử như một mô-đun, vì vậy bạn có thể dễ dàng import nó bất cứ nơi nào bạn có thể cần nó (ví dụ import history from './history';