CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-redux
Signum
Signum

Reputation: 875

React with Redux and Router - not rendering component

I don't understand why component Sample is not rendering at all. Url changes, no errors in console, however component is not mounted. No matter if it is functional component or React class. And why inline component with URL "/thisworks" is rendered properly. What am I doing wrong here?

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;

Upvotes: 0

Views: 53

Answers (1)

Kox
Kox

Reputation: 853

Maybe component instead of Component?

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

Upvotes: 2

Related Questions