需要在React中访问标头组件内的URL

Question

<Provider store = {store}>
        <Router history = {history} >
           <section>
                <Header/>
                <Route exact path="/" component={DealList}/>
                <Route path = "/deal" component={FormDeal}/>
                <Route path = "/admin" component={Admin}/>
                <Footer/>
           </section>
      </Router>
      </Provider> 

我想通过标头组件访问浏览器的URL。但这是空的。
我如何访问URL，并且可以使用React-Router版本-4

Answer 1

您可以使用withRouter函数。

每当路由与渲染prop相同的道具变化时

在您的情况下，您可以写这样的东西：

render(){
  const HeaderWithRouter = withRouter(Header);
  return (
    <Provider store = {store}>
            <Router history = {history} >
               <section>
                    <HeaderWithRouter/>
                    <Route exact path="/" component={DealList}/>
                    <Route path = "/deal" component={FormDeal}/>
                    <Route path = "/admin" component={Admin}/>
                    <Footer/>
               </section>
          </Router>
    </Provider>
  );
}

Answer 2

withRouter()中的包装头，然后在标头组件中使用：

this.props.location for accessing url
// use WrappedHeader inside Provider
const WrappedHeader = withRouter(Header)
// in Header
this.props.location