Question

我正在尝试使用 react-router 创建三重嵌套，但它不起作用。这是预期的输出我想执行，但我正在尝试使用路由器实现此功能，因此我的选项卡应根据传递给它的 URL 进行切换。

当用户只在 URL 中写入 / 时，它应该重定向到登录页面（工作）
当用户写入 /dashboard 时，它应该重定向到带有侧列表的仪表板（工作）
当用户单击仪表板抽屉中的“关于”等列表项时，它应该呈现“关于”页面。
现在我的关于页面包含两个选项卡，一个用于常规，一个用于帐户（在我实现此功能之前一切正常，现在整个应用程序都崩溃了，甚至没有显示错误）

这是我在 sandbox 中的代码。 注意：我已经评论了我的第三个嵌套路由，因为它使整个应用程序崩溃

App.js

import { Switch, Route } from "react-router-dom";

import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import "./styles.css";


export default function App() {
  return (
    <div className="App">
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/" exact component={Login} />
      </Switch>
    </div>
  );
}

用于嵌套路由的 Dashboard.js

import { Switch, Redirect, Route, useRouteMatch } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import AppDrawerBar from "../components/AppDrawerBar";

const Dashboard = () => {
  const { path } = useRouteMatch();
  return (
    <>
      <AppDrawerBar>
        <Switch>
          <Route path={`${path}/about`} component={About} />
          <Route path={`${path}/home`} component={Home} />
          <Redirect to={`${path}/home`} />
        </Switch>
      </AppDrawerBar>
    </>
  );
};

export default Dashboard;

About.js 第三个嵌套路由，用于在点击关于列表项后处理标签导航

import { Switch } from "@material-ui/core";
import React from "react";
import { Redirect, Route } from "react-router-dom";
import TabMenu from "../components/TabMenu";

const About = (props) => {
  return (
    <>
      <h1>Welcome to about</h1>

{/* This doesn't work.. this code is to render tab navigation */}
      {/* <Switch>
        <Redirect exact from={`${props.path}/about`} to="about/general" />
        <Route
          exact
          path="/about/:page?"
          render={(props) => <TabMenu {...props} />}
        />
      </Switch> */}
    </>
  );
};

export default About;

TabMenu.js 来处理我的标签

import { Paper, Tab, Tabs } from "@material-ui/core";
import React, { useState } from "react";
import General from "../pages/General";
import Account from "../pages/Account";

const TabMenu = (props) => {
  const { match, history } = props;
  const { params } = match;
  const { page } = params;

  const tabNameToIndex = {
    0: "about",
    1: "contact"
  };

  const indexToTabName = {
    about: 0,
    contact: 1
  };
  const [selectedTab, setSelectedTab] = useState(indexToTabName[page]);
  const handleChange = (event, newValue) => {
    history.push(`/about/${tabNameToIndex[newValue]}`);
    setSelectedTab(newValue);
  };

  return (
    <>
      <Paper elevation={2}>
        <Tabs
          value={selectedTab}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
        >
          <Tab label="General" />
          <Tab label="Profile" />
        </Tabs>
      </Paper>
      {selectedTab === 0 && <General />}
      {selectedTab === 1 && <Account />}
    </>
  );
};

export default TabMenu;

无法使用材质 ui 选项卡在反应路由器中创建三重嵌套路由

0 个答案: