在React应用中,可以通过React Router将上下文消费者传递给仅由React Router呈现的组件。下面是一种实现方法:
npm install react-router-dom
<Router>
组件包裹整个应用的根组件。例如:import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
{/* 根组件的内容 */}
</Router>
);
}
withRouter
高阶组件来包裹组件。例如,假设需要将上下文传递给名为Event
的组件:import { withRouter } from 'react-router-dom';
function Event(props) {
// 使用props中的上下文数据
// ...
}
export default withRouter(Event);
Event
组件就可以通过props
访问到上下文数据,例如props.location
、props.history
等。这样,通过React Router的withRouter
高阶组件,可以将上下文消费者传递给仅由React Router呈现的组件。
领取专属 10元无门槛券
手把手带您无忧上云