javascript - 使用 ReactJS 新上下文 API 时出现 React-router-V4 渲染错误
问题描述
我正在尝试将 React Router V4 与新的 React 上下文 API 一起使用。这是我的代码:
class App extends Component {
static propTypes = {
router: PropTypes.func.isRequired,
module: PropTypes.string.isRequired,
sideMenuConfig: PropTypes.string
};
render() {
let baseName = "/" + this.props.module;
// This will get my dashboard component, loading context from database
let navComponent = (
<MyCustomAppContextProvider>
<AppContext.Consumer>
{context =>
<Dashboard
context={context}
module={this.props.module}
router={router}
sideMenuConfig={this.props.sideMenuConfig}
/>
}
</AppContext.Consumer>
</MyCustomAppContextProvider>
);
let routes = null;
if (!isAuthenticated()) {
routes = <Auth
baseName={baseName}
/>;
} else {
routes = (
<Switch>
<Route exact path="/logout" component={Logout} />
<Route exact path="/auth" component={Logout} />
<Route exact path="/" component={navComponent} />
<Route
exact
path="/:screen"
component={navComponent}
/>
<Route
exact
path="/:screen/:action"
component={navComponent}
/>
<Route
exact
path="/:screen/:action/:id"
component={navComponent}
/>
<Route component={PageNotFoundError} />
</Switch>
);
}
return (
<BrowserRouter basename={baseName}>
{routes}
</BrowserRouter>
);
}
}
export default App;
router
包含一个路由器功能,它将根据导航路径加载我的屏幕。
module
是模块名称。
sideMenuConfig
是我的侧边菜单的 json 配置。
尝试运行时,我从反应路由器收到以下错误:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
Check the render method of `Route`.
我希望在仪表板中接收所有传递的道具以及匹配属性来运行路由器。
解决方案
问题是您没有将组件传递给Route
// THIS IS NOT A COMPONENT
let navComponent = (
<MyCustomAppContextProvider>
<AppContext.Consumer>
{context => (
<Dashboard
context={context}
module={this.props.module}
router={router}
sideMenuConfig={this.props.sideMenuConfig}
/>
)}
</AppContext.Consumer>
</MyCustomAppContextProvider>
)
组件要么是class
扩展的,React.Component
要么是函数:
// THIS IS A COMPONENT
let NavComponent = props => (
<MyCustomAppContextProvider>
<AppContext.Consumer>
{context => (
<Dashboard
context={context}
module={this.props.module}
router={router}
sideMenuConfig={this.props.sideMenuConfig}
/>
)}
</AppContext.Consumer>
</MyCustomAppContextProvider>
)
更新您的更新:
你对什么是组件感到困惑
// THIS IS A COMPONENT
let Foo = props => <div />
// THIS IS NOT A COMPONENT
let Foo = <div />
您需要将一个组件传递给 Route 的组件属性:
let NavComponent = props => <MyCustomAppContextProvider>...
// YES
<Route component={NavComponent} />
// NO
<Route component={<NavComponent />} />
推荐阅读
- postgresql - MS Access + Postgres 口音/不区分大小写的可编辑过滤器
- node.js - 登录到 Nodejs 日志中间件中的 AWS CloudWatch Logs(例如:morgan、pino)
- kubernetes - Openshift:如何删除或管理特定的 Pod
- wso2 - WSO2 Api Manager RestApiAdmin wsdl 使用
- java - PIG - org.apache.hadoop.hdfs.DataStreamer - DataStreamer 异常 java.nio.channels.ClosedByInterruptException
- python - 蓝牙输入形成无线设备
- kubernetes - OpenShift 3.11 中的健康检查修改
- arrays - 如果我将 char 数组初始化为零/{0},我是否必须 null 终止?
- javascript - 如何使用 html 和 json 文件创建自定义模块?
- sas - 日期的 SAS 全局变量