是否可以給動態分量 <Route> 在react-router-dom中？

Question

我們已經知道如何動態拾取和渲染組件：

import CompA  from './CompA';
import CompB  from './CompB';

var componentSet = {
 'compa': CompA,
 'compb': CompB
}

var type = 'compa' 
var TargetComp = componentSet[type];
...
return <TargetComp /> 

但是嘗試將其與<Route>組件集成時沒有成功：

class DynamicRoute extends Component {
    render() {
        return (
            <Route path="/compa" render={()=> <TargetComp /> }/>
        );
    }
}
// Error message:
// Content.render(): A valid React element (or null) must be returned.- 
// You may have returned undefined, an array or some other invalid object.

感謝您的幫助！

Answer 1

這是v4嗎？ 我通常使用組件prop而不是render。 這行得通嗎？

<Route path="/compA" component={TargetComp}/>

Answer 2

如果要訪問通過Route渲染的組件中的路線屬性（例如match ， location或history例如在組件代碼中的this.props.history中），則可以通過以下方式將props傳遞到組件中：

<Route path="/compA" component={(props) => (<compA {...props} myProp={this.state.myProp} />) } />