如何訪問React路由器的位置道具？

Question

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter } from 'react-router-dom'; 
import App from './components/App'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <BrowserRouter> 
    <App /> 
    </BrowserRouter>, 
    document.getElementById('root') 
); 
registerServiceWorker(); 

我需要能夠訪問App組件中的location prop。我想知道是否有可能讓Router組件將其history道具傳遞給子組件App。

Answer 1

最好的辦法是使用withRouter HOC。

它將通過match, location, history道具到包裹部件：

import { withRouter } from 'react-router'; 

const App = ({ location }) => <div></div>; 

export const AppWithRouter = withRouter(App);