React-router-V4 не передает свойство `match` отображаемому компоненту - PullRequest
0 голосов
/ 26 апреля 2018

У меня следующий код для React-Router-V4:

render = () => {

    let NavComponent = props => (
        <AppContextProvider>
            <AppContext.Consumer>
                {context => (
                    <Dashboard
                        context={context}
                        module={"TEST"}
                        title={"TEST TITLE"}
                    />
                )}
            </AppContext.Consumer>
        </AppContextProvider>
        );

    return (
        <BrowserRouter basename={baseName}>
            <Switch>
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/auth" component={Logout} />
                <Route
                    exact
                    path="/:screen/:action/:id"
                    component={NavComponent}
                />

                <Route component={PageNotFoundError} />
            </Switch>
        </BrowserRouter>
    );
}

По какой-то причине я получаю context, module и title изнутри моего Dashboard компонента, ноЯ не получаю свойство match, которое должно быть отправлено из компонента <Route>.

Есть идеи о том, что происходит и как решить?

1 Ответ

0 голосов
/ 26 апреля 2018
let NavComponent = props => ( <--- these are your route props
  <AppContextProvider>
    <AppContext.Consumer>
      {context => (
        <Dashboard
          context={context}
          module={"TEST"}
          title={"TEST TITLE"}
          {...props} <--- pass the route props down
        />
      )}
    </AppContext.Consumer>
  </AppContextProvider>
);

Это будет намного понятнее, если вы напишите это в строке:

<Route
  exact
  path="/:screen/:action/:id"
  component={props => (
    <AppContextProvider>
      <AppContext.Consumer>
        {context => (
          <Dashboard
            context={context}
            module={"TEST"}
            title={"TEST TITLE"}
            {...props}
          />
        )}
      </AppContext.Consumer>
    </AppContextProvider>
  )}
/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...