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

React-router-V4没有将`match`属性传递给渲染组件

1 个答案: