我想弄清楚如何将 React Router 的 location 属性传递给组件。
我有一个这样定义的路线：
<Route
path="placeholder"
render={(props) => <Navigation {...props} />}
/>
在我的 Navigation 组件中，我console.log(this.props);在渲染方法中所做的只是为了获得一个空对象。是什么赋予了？不应该将 location props自动提供给 Route 内的任何组件吗？
顺便说一句，我使用的是 react-router-dom version 4.2.2。
您需要用 包裹您的组件withRouter以注入match,history并location在您的组件props中。
import { withRouter } from 'react-router-dom';
class Navigation extends React.Component {
render() {
const { match, location, history } = this.props
return (
<div>{location.pathname}</div>
)
}
}
export default withRouter(Navigation)
您需要使用主组件上的withRouter功能，'react-router-dom'在该组件中设置包装在 Switch 中的 Routes，并且您应该可以使用 Navigation 组件上的 location 属性访问this.props.location
App.js
Class App extends Component {
render(){
return (
<Aux>
<Switch>
<Route path="/login" exact component={Login}/>
<Route path="/Navigation" component={Navigation}/>
<Redirect to="/login"/>
</Switch>
</Aux>
);
}
}
export default withRouter(App);