React-Router：组件未呈现，但 URL 更改

Question

我是 React js 的新手。 我正在实现抽屉（material-ui），所以当用户点击左侧菜单（LeftMenu.jsx）时；相应的组件应该在中心渲染（即 MainContent.jsx）

不幸的是，我收到以下错误： Error: Invariant failed: You should not use <Link> outside a <Router> 但是，如果我在 LeftMenu.jsx 中包含链接，则 URL 会更改，但视图不会呈现。

我尝试了React router changes url but not view中给出的解决方案，但问题仍然没有解决。

以下是组件列表：

Status.jsx

import React, { Component } from "react";
class Status extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>Status</div>;
  }
}
export default Status;

AdminPanelLayout.jsx

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

  const handleDrawerOpen = () => {
    if (open) {
      setOpen(false);
    } else {
      setOpen(true);
    }
  };

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

  return (
    <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"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
      >
        <div className={classes.toolbar}></div>
        <Divider />
        <LeftMenu></LeftMenu>
      </Drawer>
      <MainContent></MainContent>
    </div>
  );
}

MainContent.jsx

export default function MainContent() {
  const classes = useStyles();
  return (
    <Router>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Switch>
          <Route path="/Status" component={withRouter(Status)}>
            <Status />
          </Route>
          <Route path="/">
            <span>testing</span>
          </Route>
        </Switch>
      </main>
    </Router>
  );
}

LeftMenu.jsx

export default function LeftMenu() {
  return (
    <div>
      <List>
        {["Status", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text} component={Link} to="/Status">
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {["All mail", "Trash", "Spam"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

App.js

import "./App.css";
import AdminPanelLayout from "./components/AdminPanelLayout";
import LeftMenu from "./components/LeftMenu";

function App() {
  return <AdminPanelLayout></AdminPanelLayout>;
}

export default App;

Answer 1

你应该使用

<Route path="/Status" component={Status}>

或

<Route path="/Status">
 <Status />
</Route>

你也不应该这样做component={withRouter(Status)}，因为这相当于component={Status}。 withRouter 的目的是获取未通过 Route 呈现的组件以访问 route props 。由于Status 已经通过Route 渲染，因此不需要用withRouter 包装它。

codesanbox - 希望这会有所帮助！