![](/img/trans.png)
[英]Webpack 2 Code Spliting with Server Side Rendering and React-Router-v4
[英]React-router-V4 not passing `match` property to rendered component
我为React-Router-V4提供了以下代码:
render = () => {
let NavComponent = props => (
<AppContextProvider>
<AppContext.Consumer>
{context => (
<Dashboard
context={context}
module={"TEST"}
title={"TEST TITLE"}
/>
)}
</AppContext.Consumer>
</AppContextProvider>
);
return (
<BrowserRouter basename={baseName}>
<Switch>
<Route exact path="/logout" component={Logout} />
<Route exact path="/auth" component={Logout} />
<Route
exact
path="/:screen/:action/:id"
component={NavComponent}
/>
<Route component={PageNotFoundError} />
</Switch>
</BrowserRouter>
);
}
由于某种原因,我从Dashboard
组件内部获取了context
, module
和title
,但是我没有收到应该从<Route>
组件发送的match
属性。
关于正在发生的事情以及如何解决的任何想法?
let NavComponent = props => ( <--- these are your route props
<AppContextProvider>
<AppContext.Consumer>
{context => (
<Dashboard
context={context}
module={"TEST"}
title={"TEST TITLE"}
{...props} <--- pass the route props down
/>
)}
</AppContext.Consumer>
</AppContextProvider>
);
如果您以内联方式编写,则更加清楚:
<Route
exact
path="/:screen/:action/:id"
component={props => (
<AppContextProvider>
<AppContext.Consumer>
{context => (
<Dashboard
context={context}
module={"TEST"}
title={"TEST TITLE"}
{...props}
/>
)}
</AppContext.Consumer>
</AppContextProvider>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.