是否有可能在react-router-dom中为<route>提供动态组件?

时间:2017-09-26 02:41:08

标签: javascript react-router-dom

我们已经知道如何动态选择和渲染组件:

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.

感谢任何帮助!

2 个答案:

答案 0 :(得分:0)

这是针对v4的吗?我通常使用组件prop而不是render。这会有用吗?

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

答案 1 :(得分:0)

如果要访问组件中的路由属性(例如matchlocationhistory,如组件代码中的this.props.history),则通过{{1你可以用这种方式将props传递给组件:

Route