Question

这是我遇到的问题的简化版本

我正在尝试将一些属性传递给我的组件（SomeComponent），但是仅传递了位置（routerProps）

<Router>
  <Switch>
    <Route
      exact
      path="/"
      render={routerProps => (
        <SomeComponent
          test="XXX"
          collections={this.props}
          {...routerProps}
        />
      )}
    />

    <Route exact strict path="/:id" component={SomeComponent2} />
    <Route
      render={() => <SiteError error="404" status="404" />}
    />
  </Switch>
</Router>

加载SomeComponent时，只有位置属性（routerProps）可用，测试和集合不存在（也没有错误）

任何想法

thx

Answer 1

您可以使用我的组件，它的作用类似于Route组件，但会将Route上的道具传递给子组件。我从Stackoverflow上的某个地方复制了它，但是我从哪里忘了。

import React from "react";
import PropTypes from "prop-types";
import Route from "react-router-dom/Route";

const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return React.createElement(component, finalProps);
};

const propsRoute = ({ component, ...rest }) => (
  <Route
    {...rest}
    render={routeProps => renderMergedProps(component, routeProps, rest)}
  />
);

propsRoute.propTypes = {
  component: PropTypes.element
};

export default propsRoute;

用法示例：

<PropsRoute
   exact
   path="/blog"
   component={Blog}
   location={location}
   selectBlog={this.selectBlog}
   blogPosts={blogPosts}
 />

React Router 4发出传递道具，仅位置传递

1 个答案: