属性在 React 组件中显示为未定义 - 检索组件中的 props.match 和附加属性答案

【问题标题】：Property displayed as undefined in React Component - Retrieve props.match and additional property in component属性在 React 组件中显示为未定义 - 检索组件中的 props.match 和附加属性
【发布时间】：2019-05-27 07:46:11
【问题描述】：

我有一个 index.js，我从中调用一个像这样的组件

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/:param1/:param2" component={MyComponent} prop1={prop1}/>
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

但在 MyComponent.js 中，this.props.prop1 显示为未定义。知道为什么吗？我需要能够得到 this.props.match.params 和 prop1

【问题讨论】：

Route 仅将路由道具history、match 和location 传递给它安装的组件。

标签： reactjs react-router

【解决方案1】：

@jonrsharpe 的评论很重要：

Route 仅将路由道具、历史、匹配和位置传递给它安装的组件。

所以，如果你想在 Route 中将 props 传递给你的组件，应该是这样的：

<Switch>
   <Route path="/pathname" render={() => (<MyComponent prop1={prop1}/>)} />
</Switch>

【讨论】：

这种方法的问题是，props、history、match 和 location，没有传递给组件，只有 prop1 被传递。

【解决方案2】：

如果您需要将 prop 传递给 React Router 正在渲染的组件，而不是使用 Routes 组件 prop，请使用它的 render prop 传递一个内联函数，然后将参数传递给您正在创建的元素。

<Route
  path='/pathname'
  render={(prop1) => <MyComponent props={prop1} />}
/>

请试试这个，应该可以的。

【讨论】：

【解决方案3】：

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/" component={() => <MyComponent prop1={prop1}>} />
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

【讨论】：

这里的问题是，我得到了 prop1，但没有得到 props.match（因为我有路径参数，我需要在 Mycomponent 中获取这些参数）。

【解决方案4】：

这会将匹配、位置、历史和自定义道具传递给新组件。

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/:param1/:param2" render={(props) => <MyComponent {...props} prop1={prop1} />} />
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

Code Sandbox link

【讨论】：