使用 ReactJS 新上下文 API 时 React-router-V4 呈现错误答案

【问题标题】：React-router-V4 render error when using ReactJS new context API使用 ReactJS 新上下文 API 时 React-router-V4 呈现错误
【发布时间】：2018-04-25 22:24:33
【问题描述】：

我正在尝试将 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`.

我希望在 Dashboard 中接收所有传递的道具以及 match 属性以运行路由器。

【问题讨论】：

应该是带点的AppContext.Provider？另外，将Consumer 渲染为Provider 的直接子级有什么意义？错误来自反应。你试图渲染的东西是一个对象。你能添加堆栈跟踪吗？它发生在哪个组件中？
这是新的上下文 API 表示法...查看official documentation。 Consumer 从数据库中获取上下文以提供给Provider。该错误似乎发生在 react-router-v4 内部。没有明确的堆栈跟踪。
我知道新的 api，但我认为在同一个组件中使用 Provider 和 Consumer 没有任何意义。您在哪里使用数据填充上下文？
“没有清晰的堆栈跟踪”是什么意思？渲染组件时发生错误。打开您的浏览器控制台并查看在哪些组件中呈现。当您尝试渲染 javascript 对象时会发生此错误（您无法渲染对象）。它不是来自 react-router。
所以你的错误的原因可能只是我在第一条评论中指出的错字。它必须是<AppContext.Provider> 而不是<AppContextProvider>。但是仍然像这样使用上下文 api 绝对没有意义。

标签： javascript reactjs react-router-v4 react-context

【解决方案1】：

问题是您没有将组件传递给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>
)

组件是扩展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>
)

更新到您的更新：

你对什么是组件感到困惑

// THIS IS A COMPONENT
let Foo = props => <div />

// THIS IS NOT A COMPONENT
let Foo = <div />

你需要传递一个组件给Route的组件prop：

let NavComponent = props => <MyCustomAppContextProvider>...

// YES
<Route component={NavComponent} />

// NO
<Route component={<NavComponent />} />

【讨论】：

由于某些其他原因，错误仍然存在...<Route> 方法中使用的新组件如何？
是的，我刚刚发现了这一点。现在它起作用了。感谢您的宝贵帮助，以及一个不错的投票！
np，不过我会接受@trixn 的建议。您的提供者/消费者位置没有多大意义

【解决方案2】：

同样的事情发生在我身上，正是那个上下文 api 导致了冲突。我还必须检查 render 方法中的每个内部组件，以确保它们都没有使用上下文 api，并且它们内部没有可用的 this.context。然后我删除了上下文 api 的东西，写了一个替代的 react-redux 状态，没有上下文 api，没问题

【讨论】：

【解决方案3】：

检查您正在导入的表单。有必要将 BrowserRouter 放在导入中。看：

import { BrowserRouter as Router, switch, route } from "react-router-dom";

【讨论】：