Переход на новую страницу вместо рендеринга компонента виспользуя React Router 4

Question

Я борюсь с рендерингом вложенных компонентов, когда нажимаю на ссылки в ящике материала-ui-next.Ниже приведен мой код для моего компонента Home:

const Home = (props) => {
const { classes } = props;

return (
    <div className={classes.root}>
        <Drawer variant="permanent">
            <div className={classes.toolbar} />
                <List component="nav">
                    {options.map(option => {
                        return (
                            <ListItem
                                key={option}
                                component={Link} to={`/${slugify(option, {lower: true})}`}
                                button>
                                <ListItemText primary={option} />
                            </ListItem>)
                    })}
                </List>
        </Drawer>
        <main className={classes.content}>
            <div className={classes.toolbar} />
                <Switch>
                    <Route exact path='/forecast' component={ContainerA} />
                    <Route path='/audience' component={ContainerB} />
                    <Route path='/adaptive-forecasting' component={ContainerC} />
                </Switch>
        </main>
    </div>
    )
};

Как вы можете видеть, здесь используется простой реагирующий маршрутизатор 4, так как дочерние маршруты указываются в домашнем контейнере вместо основного.

Но я не могу понять, что здесь происходит ... может кто-то помочь?

Обновление 1

Я получаю следующее предупреждение вконсоль, это определенно означает, что что-то не так с опорами, которые я передаю:

browser.js:49 Warning: Material-UI: the value provided `undefined` is invalid