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>
)

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))

Sample.jsx：

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

Answer 1

可能component代替Component？

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

与Redux和路由器反应 - 不渲染组件

1 个答案: