Материал интерфейса ящика, сиденав и реагирует-роутер не работает

Question

Я пытаюсь реализовать Material UI Drawer как sidenav и у меня проблемы с навигацией. В настоящий момент я получаю следующую ошибку, из-за которой мое приложение не загружается:

Warning: [react-router] Location "/" did not match any routes

У меня действительно есть путь = "/" в моем маршрутизаторе (см. Routes.js ниже), поэтому я не уверен, что я делаю здесь неправильно.

Вот немного моего кода ниже.

    //App.js
    ..
    render() {
            const { alert } = this.props;
            return (
                <Provider store={store}>
                    <Router history={history}>
                        <div>
                            <Layout>
                                <Routes/>
                            </Layout>
                        </div>
                    </Router>
                </Provider>
            );
        }
    ..

    //Layout.js
    ...
    return (
        <div className={classes.root}>
          <CssBaseline />
          <AppBar position="fixed" className={classes.appBar}>
            <Toolbar>
              <Header />
            </Toolbar>
          </AppBar>
          <Drawer
            className={classes.drawer}
            variant="permanent"
            classes={{
              paper: classes.drawerPaper,
            }}
          >
            <div className={classes.toolbar} />
            <MenuList>
              <MenuItem component={Link} to="/admin">
                Admin
              </MenuItem>
...
            </MenuList>
          </Drawer>
          <main className={classes.content}>
            <div className={classes.toolbar} />
            {children}
          </main>
        </div>
      );
    }

// Routes.js
...
export default function Routes(props) {
    return (
        <Switch>
            <Route path="/" component={HomePage} />
            <Route path="/callback" component={LoginCallback} />
            <Route path="/landing" component={LandingPage} />
            <Route component={EnsureLoggedInContainer}>
                <Route path="/admin" component={AdminLanding} />
                ...
            </Route>
        </Switch>
  );
}

Я играл с Routes.js, и если я перехожу из App.js в Routes.js и удаляю, я, по крайней мере, получаю HomePage, но тогда навигация не работает. Я использую следующие зависимости:

• "@ material-ui / core": "^ 3.3.2"
• «реагирующий маршрутизатор»: «^ 3.2.1»
• "response-router-dom": "^ 4.1.2"
• "Reaction-router-redux": "^ 4.0.8"