React Router 4 问题传递道具，只传递位置

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) 可用，测试和集合不存在（也没有错误）

任何想法

感谢

Answer 1

您可以使用我的组件，它的行为类似于 Route 组件，但它将 Route 上的 props 传递给子组件。我从 Whosebug 上的某个地方复制了它，但我忘了从哪里了。

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 问题传递道具，只传递位置

React Router 4 issue passing props, only location is being passed

reactjs

react-router-v4