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

出于某种原因，我得到 context , module和title从我的内部Dashboard组件，但我没有收到 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>
  )}
/>