Javascript 使用ReactJS新上下文API时出现React-router-V4渲染错误

我正在尝试将React路由器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;

---

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

问题在于您没有将组件传递到

路由

// 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>
)

更新到您的更新：

您对什么是组件感到困惑

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

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

//这是一个组件
让Foo=props=>
//这不是一个组件
设Foo=

您需要将组件传递到管线的组件道具：

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

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

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

让NavComponent=props=>。。。
//对
//没有

问题是您没有将组件传递到

路由

// 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>
)

更新到您的更新：

您对什么是组件感到困惑

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

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

//这是一个组件
让Foo=props=>
//这不是一个组件
设Foo=

您需要将组件传递到管线的组件道具：

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

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

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

让NavComponent=props=>。。。
//对
//没有

同样的事情也发生在我身上，是上下文api导致了冲突。我还必须检查render方法中的每个内部组件，以确保它们都没有使用上下文api，也没有

this.context

可用。然后，我删除了上下文api的内容，并编写了另一个react redux状态，没有上下文api，没有问题。同样的情况发生在我身上，是上下文api导致了冲突。我还必须检查render方法中的每个内部组件，以确保它们都没有使用上下文api，也没有

this.context

可用。然后我删除了上下文api的内容，并编写了另一个react-redux状态，没有上下文api，没有问题

应该是带点的

AppContext.Provider

？另外，将

消费者

呈现为

提供者

的直接子级有什么意义？错误来自于反应。您试图渲染的对象是对象。你能添加堆栈跟踪吗？它发生在哪个组件中？这是新的上下文API符号。。。请点击查看。

消费者

从数据库中获取上下文以提供给

提供者

。该错误似乎发生在react-router-v4内部。没有明确的stacktrace。我知道新的api，但我认为在同一组件中使用提供者和使用者没有任何意义。在哪里用数据填充上下文？什么是“无清晰堆栈跟踪”？渲染组件时发生错误。打开浏览器控制台，查看渲染该组件的组件。当您尝试渲染javascript对象（无法渲染对象）时，会发生此错误。它不是来自react-router。因此，您出错的原因可能只是我在第一条评论中指出的打字错误。它必须是

而不是

。但是仍然像这样使用上下文api是毫无意义的。应该是带点的

AppContext.Provider

？另外，将

消费者

呈现为

提供者

的直接子级有什么意义？错误来自于反应。您试图渲染的对象是对象。你能添加堆栈跟踪吗？它发生在哪个组件中？这是新的上下文API符号。。。请点击查看。

消费者

从数据库中获取上下文以提供给

提供者

。该错误似乎发生在react-router-v4内部。没有明确的stacktrace。我知道新的api，但我认为在同一组件中使用提供者和使用者没有任何意义。在哪里用数据填充上下文？什么是“无清晰堆栈跟踪”？渲染组件时发生错误。打开浏览器控制台，查看渲染该组件的组件。当您尝试渲染javascript对象（无法渲染对象）时，会发生此错误。它不是来自react-router。因此，您出错的原因可能只是我在第一条评论中指出的打字错误。它必须是

而不是

。但是仍然像这样使用上下文api是毫无意义的。。。新组件是如何在

方法中使用的？是的，我刚刚发现了这一点。现在它起作用了。谢谢你宝贵的帮助，祝你一路顺风！np，不过我会接受@trixn的建议。您的提供商/消费者位置对于错误持续存在的其他原因没有太大意义。。。新组件是如何在

方法中使用的？是的，我刚刚发现了这一点。现在它起作用了。谢谢你宝贵的帮助，祝你一路顺风！np，不过我会接受@trixn的建议。你的供应商/消费者安置没有多大意义