Question

我正在努力将道具从路由器传递到我的布局文件，但道具customClass未被传递。

这是我的React app的路由器：

const WithMainLayout = ({component: Component, ...more}) => {
  return <Route {...more} render={props => {
    return (
      <MainLayout {...props}>
        <Component {...props} />
      </MainLayout>
    );
  }}/>;
};

const App = ({store}) => {
  return (
    <StoreProvider store={store}>
      <ConnectedRouter history={history}>
        <ScrollToTop>
          <Switch>
            <WithMainLayout exact path="/" component={Home2} customClass="XXX" />
          </Switch>
        </ScrollToTop>
      </ConnectedRouter>
    </StoreProvider>
  );
};

问题在MainLayout中，我没有得到customClass prop：

class MainLayout extends React.Component {
  componentDidMount() {
    console.log(this.props.customClass);
  ...

这被记录为undefined

我在这里做错了什么？

由于

Answer 1

好的，所以从路由器传递到render方法回调的props参数不包含你应用于<WithMainLaout />的属性，它包含历史，位置和匹配。要解决您的问题，您可以执行以下操作：

const WithMainLayout = ({component: Component, ...more}) => {
  return <Route {...more} render={props => {
    return (
      <MainLayout {...props} {...more}>
        <Component {...props} {...more} />
      </MainLayout>
    );
  }}/>;
};

这将为您提供两者的属性。

Answer 2

像这样传递道具：

<WithMainLayout exact path="/" component={<Home2 customClass={"XXX"} />} />

如何将React Router 4中的道具传递给Container？

2 个答案: