Question

我正在尝试将Material UI Drawer实现为sidenav并出现导航问题。就目前而言，我收到以下错误，导致我的应用无法加载：

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

我的路由器中确实有path =“ /”（请参见下面的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并删除，我至少会得到我的主页，但导航无法正常工作。我正在使用以下依赖项：

“ @ material-ui / core”：“ ^ 3.3.2”
“反应路由器”：“ ^ 3.2.1”
“ react-router-dom”：“ ^ 4.1.2”
“ react-router-redux”：“ ^ 4.0.8”

实质性的UI抽屉sidenav和react-router无法正常运行

0 个答案: