Question

我有一个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

Answer 1

@jonrsharpe 的评论非常重要：

路线仅将路线道具，历史记录，比赛和位置传递给安装的组件。

因此，如果您想将道具传递给路线中的组件，应该像这样：

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

Answer 2

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

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

请尝试一下，应该可以。

Answer 3

const prop1 = 'test'
ReactDOM.render(

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

Answer 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

在React Component中显示为未定义的属性-检索props.match和组件中的其他属性

4 个答案: