Javascript 什么'；在react路由器dom中分离路由的最佳方法是什么？

我用routes做了一个小任务，当我在URL中放入

/

时，它会将我重定向到登录页面，当我放入

/dashboard

时，它会将我重定向到具有材质UI持久抽屉的dashboard。但是我用了完全错误的方法，因为我在两个组件中使用了browserRouter，但理想情况下，它应该只在根组件中，正因为如此 当我第一次单击抽屉中的某个链接时，它会在仪表板中呈现该组件，但当我刷新页面时，它不会加载任何内容 我看到了一个例子，路由组织得很好，比如当我点击登录时，他们的URL是

auth/login

当我注册时，他们的URL是

auth/signup

，当我进入仪表板时，他们的URL是

仪表板/app

，当我点击其他链接项目时，模式也是一样的

仪表板/链接

请看上面的例子来理解我试图解释的内容

您也可以在codesandbox上看到我的代码

Inshort:我想以这样的方式组织我的路线

auth/login

auth/signup

dashboard/app

dashboard/profile

等等

我的App.js

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

import AppDrawerBar from "./compponents/AppDrawerBar";
import Login from "./pages/Login";
import "./styles.css";

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

import React from "react";

const Login = () => {
  return <h1>Login Page</h1>;
};

export default Login;

import React from "react";

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

import React from "react";

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

从“react router dom”导入{Switch，Route}；
从“/components/AppDrawerBar”导入AppDrawerBar；
从“/pages/Login”导入登录名；
导入“/styles.css”；
导出默认函数App（）{
返回(
);
}

Login.js

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

import AppDrawerBar from "./compponents/AppDrawerBar";
import Login from "./pages/Login";
import "./styles.css";

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

import React from "react";

const Login = () => {
  return <h1>Login Page</h1>;
};

export default Login;

import React from "react";

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

import React from "react";

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

从“React”导入React；
常量登录=（）=>{
返回登录页面；
};
导出默认登录；

Dashboard.js，其中链接默认包含主组件的路由和关于组件的路由

import React from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core";
import Drawer from "@material-ui/core/Drawer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import Home from "../pages/Home";
import About from "../pages/About";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  hide: {
    display: "none"
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0
  },
  drawerPaper: {
    width: drawerWidth
  },
  drawerHeader: {
    display: "flex",
    alignItems: "center",
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: "flex-end"
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    marginLeft: -drawerWidth
  },
  contentShift: {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen
    }),
    marginLeft: 0
  }
}));

export default function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(true);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <BrowserRouter>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="fixed"
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open
          })}
        >
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              edge="start"
              className={clsx(classes.menuButton, open && classes.hide)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap>
              Persistent drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          className={classes.drawer}
          variant="persistent"
          anchor="left"
          open={open}
          classes={{
            paper: classes.drawerPaper
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === "ltr" ? (
                <ChevronLeftIcon />
              ) : (
                <ChevronRightIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>
            <ListItem button key="home" to="/home" component={Link}>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Home" />
            </ListItem>
          </List>
          <Divider />
          <List>
            <ListItem button key="about" to="/about" component={Link}>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="About" />
            </ListItem>
          </List>
        </Drawer>
        <main
          className={clsx(classes.content, {
            [classes.contentShift]: open
          })}
        >
          <div className={classes.drawerHeader} />
          <Route path="/home" exact component={Home} />
          <Route path="/about" component={About} />
        </main>
      </div>
    </BrowserRouter>
  );
}

从“React”导入React；
从“clsx”导入clsx；
从“@material ui/core”导入{makeStyles，useTheme}；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入收件箱；
从“@material ui/icons/Mail”导入MailIcon；
从“./页面/主页”导入主页；
从“./pages/About”导入关于；
从“react router dom”导入{BrowserRouter，Link，Route，Switch}；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”
},
appBar：{
过渡：主题。过渡。创建（[“边距”，“宽度”]{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
})
},
appBarShift：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
过渡：主题。过渡。创建（[“边距”，“宽度”]{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen
})
},
菜单按钮：{
边缘光：主题。间距（2）
},
隐藏：{
显示：“无”
},
出票人：{
宽度：抽屉宽度，
flexShrink:0
},
抽屉纸：{
宽度：抽屉宽度
},
抽屉阅读器：{
显示：“flex”，
对齐项目：“中心”，
填充：主题。间距（0，1），
//内容必须位于应用程序栏下方
…theme.mixins.toolbar，
辩护内容：“柔性端”
},
内容：{
flexGrow:1，
填充：主题。间距（3），
过渡：theme.transitions.create（“margin”{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
}),
边缘左侧：-抽屉宽度
},
contentShift：{
过渡：theme.transitions.create（“margin”{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen
}),
边缘左侧：0
}
}));
导出默认函数PersistentDrawerLeft（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（true）；
常量handleDrawerOpen=（）=>{
setOpen（真）；
};
常量handleDrawerClose=（）=>{
setOpen（假）；
};
返回(
持久抽屉
{theme.direction===“ltr”(
) : (
)}
);
}

Home.js

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

import AppDrawerBar from "./compponents/AppDrawerBar";
import Login from "./pages/Login";
import "./styles.css";

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

import React from "react";

const Login = () => {
  return <h1>Login Page</h1>;
};

export default Login;

import React from "react";

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

import React from "react";

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

从“React”导入React；
常量Home=（）=>{
返回主页；
};
导出默认主页；

关于.js

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

import AppDrawerBar from "./compponents/AppDrawerBar";
import Login from "./pages/Login";
import "./styles.css";

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

import React from "react";

const Login = () => {
  return <h1>Login Page</h1>;
};

export default Login;

import React from "react";

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

import React from "react";

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

从“React”导入React；
const About=（）=>{
返回关于页面的信息；
};
导出默认值约为；

如果我正确理解了您的问题，您正在尝试创建嵌套路由，即您希望在“/dashboard”子域中的嵌套路由上呈现

关于
组件，如“/dashboard/About”

问题
您已经将
AppDrawerBar
组件包装到第二个嵌套路由器中。这会将整个应用程序路由作为外部路由弄乱