Ошибка рендеринга React-router-V4 при использовании нового контекстного API ReactJS - PullRequest
Новая
       19

Ошибка рендеринга React-router-V4 при использовании нового контекстного API ReactJS

0 голосов
/ 26 апреля 2018

Я пытаюсь использовать React Router V4 с новым контекстным API React.Вот мой код: 

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 isконфигурация 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 для запуска маршрутизатора.

1 Ответ

0 голосов
/ 26 апреля 2018

Проблема в том, что вы не передаете компонент в 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 />} />
...