Javascript 使用Redux和路由器进行反应-不渲染组件

我不明白为什么组件示例根本不渲染。Url更改，控制台中没有错误，但组件未装入。无论是功能组件还是React类。以及为什么正确呈现URL为“/thisworks”的内联组件。我做错了什么

index.jsx：

render(
    <Provider store={store}>
        <Root />
    </Provider>,
    document.getElementById("root")
);

渲染(
,
document.getElementById（“根”）
);

root.js：

const Root = () => (
    <div>
        <BrowserRouter>
            <Switch>
// routes below work fine
                <Route path="/login" component={LoginPage} />
                <Route path="/" component={App} />
            </Switch>
        </BrowserRouter>
        <DevTools />
    </div>
)

constroot=（）=>(
//下面的路线可以正常工作
)

App.js：

class App extends React.Component {
    render() {
        return (
            <div>
                <NavMenu />
                <Switch>
                    <Route path="/thisworks" render={(props) => {
                        return (<div>This works!</div>);
                    }} />
                    <Route path="/sample" Component={Sample} /> // not working - not rendering component Sample
                    <Redirect from="/" to="/sample" />
                </Switch>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({})    
const mapDispatchToProps = (dispatch) => ({})    
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

类应用程序扩展了React.Component{
render（）{
返回(
{
返回（这是有效的！）；
}} />
//不工作-不呈现组件示例
);
}
}
常量mapStateToProps=（state，ownProps）=>（{}）
常量mapDispatchToProps=（调度）=>（{}）
使用路由器导出默认值（连接（mapStateToProps、mapDispatchToProps）（应用））

Sample.jsx：

const Sample = (props) => {
    return (
        <div>
            Sample!
        </div>
    );
}
export default Sample;

const-Sample=（道具）=>{
返回(
样品
);
}
导出默认样本；
可能是
组件
而不是
组件

<Route path="/sample" component={Sample} />


可能是
组件
而不是
组件

<Route path="/sample" component={Sample} />


是的，它发生了^^是的，它发生了^^