React Router this.props.location 總是未定義

Question

我需要將類名設置為當前路徑的名稱，例如“inventory”或“about”。 但是，當我嘗試使用 this.props.location 時，它始終是未定義的。 有人可以向我解釋為什么會這樣嗎？

class Header extends Component{
    render(){
      return(
        <Router>
          <div className={'header ' + this.props.location}>
            <div className="header-content">        
                <div className="header-right">
                <NavLink exact to="/">Home</NavLink>
                <NavLink to="/about">About</NavLink>
                <NavLink to="/inventory">Inventory</NavLink>
                </div>
            </div>
          </div>
          <div className="page-content">

            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/inventory" component={Inventory}/>
          </div>
        </Router>
      );
    }
}

Answer 1

這里的事情是history ， location和等等等等都被傳遞給了<Route />的組件，但是你正試圖從創建路由器的同一個組件訪問它。 所以或者你在當前的父文件中創建了路由器，或者使用 window 對象

 <div className={'header ' + window.location}>

Answer 2

我認為您應該在層次結構中將路由器移到更高的位置，最好是將您的 App 組件呈現為這樣的組件：

<Router history={history}>
    <App />
</Router>

您當前正在嘗試從 props 讀取位置，但是因為您在同一個組件中渲染 Router，它無法將位置傳遞給 props，因此它將始終為空。 如果您通過路由器包裝您的應用程序，那么您可以將位置道具向下傳遞到需要它的任何其他組件（例如標題）。