javascript - 使用 Redux 和 Router 进行 React - 不是渲染组件

Question

我不明白为什么组件 Sample 根本不渲染。 URL 更改，控制台中没有错误，但组件未安装。无论是函数式组件还是React类。以及为什么 URL 为“/thisworks”的内联组件能够正确呈现。我在这里做错了什么？

index.jsx:

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

root.js:

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

应用程序.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))

示例.jsx:

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

Answer 1

也许组件而不是组件？

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