[英]React-router-V4 render error when using ReactJS new context API
I´m trying to use React Router V4 with new React´s context API. Here is my code:我正在尝试将 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
contains a router function that will load my screen depending on the navigation path. router
包含一个路由器 function,它将根据导航路径加载我的屏幕。
module
is the module name. module
是模块名称。
sideMenuConfig
is a json configuration for my side menu. sideMenuConfig
是我的侧边菜单的 json 配置。
When trying to run I´m getting the following error from react router:尝试运行时,我从 react router 收到以下错误:
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`.
I expect in Dashboard to receive all the props passed plus the match property to run the router.我希望在 Dashboard 中接收所有传递的道具以及运行路由器的匹配属性。
The problem is that you're not passing a component to 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>
)
A component is either a class
that extends React.Component
or a function:一个组件要么是一个扩展React.Component
的class
,要么是一个函数:
// 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>
)
UPDATE to your UPDATE:更新到您的更新:
You're getting confused about what is a component你对什么是组件感到困惑
// THIS IS A COMPONENT
let Foo = props => <div />
// THIS IS NOT A COMPONENT
let Foo = <div />
You need to pass a component to Route's component prop:您需要将一个组件传递给 Route 的组件 prop:
let NavComponent = props => <MyCustomAppContextProvider>...
// YES
<Route component={NavComponent} />
// NO
<Route component={<NavComponent />} />
Same happened to me, it was that context api which was causing a conflict.我也遇到了同样的情况,正是上下文 api 导致了冲突。 I also had to check every single inner components inside render method to make sure that none of them use context api and has no this.context
available inside them.我还必须检查 render 方法中的每个内部组件,以确保它们都不使用上下文 api 并且其中没有可用的this.context
。 I then deleted context api stuff and wrote an alternative react-redux state, no context api, no problem然后我删除了上下文 api 的东西并写了一个替代的 react-redux 状态,没有上下文 api,没问题
Check the form you are importing.检查您正在导入的表格。 It is necessary to put the BrowserRouter in the import.有必要将 BrowserRouter 放在导入中。 Look:看:
import { BrowserRouter as Router, switch, route } from "react-router-dom";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.