CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
Mendes
Mendes

Reputation: 18461

React-router-V4 not passing `match` property to rendered component

I´ve the following code for 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>
    );
}

For some reason I get context, module and title from inside my Dashboard component, but I´m not receiving the match property that is supposed to be sent from <Route> component.

Any ideas of what is happening and how to solve?

Upvotes: 1

Views: 566

Answers (1)

azium
azium

Reputation: 20614

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

This is a lot more clear if you write it inline:

<Route
  exact
  path="/:screen/:action/:id"
  component={props => (
    <AppContextProvider>
      <AppContext.Consumer>
        {context => (
          <Dashboard
            context={context}
            module={"TEST"}
            title={"TEST TITLE"}
            {...props}
          />
        )}
      </AppContext.Consumer>
    </AppContextProvider>
  )}
/>

Upvotes: 3

Related Questions