React-router-V4 没有将`match` 属性 传递给呈现的组件

Question

我有以下用于 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>
    );
}

出于某种原因，我从我的 Dashboard 组件中得到 context、module 和 title，但我没有收到 match 属性 应该从 <Route> 组件发送。

对正在发生的事情以及如何解决有什么想法吗？

Answer 1

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