当我在动态路线上时，无法返回上一条路线

Question

因此，我有一条显示用户的路由，每个用户都是可单击的，并导致动态的用户详细信息路由。当我在详细路线上时，如果按布局按钮返回到列表，则不会发生任何事情。

我尝试创建一个使用window.location.reload（true）的const并将其传递给onClick，但这不起作用

users.js

import React from "react"
import { BrowserRouter as Router,Switch, Route} from "react-router-dom"
import Layout from "../components/layout"
import User from "../components/users"
import MainComponentWrapper from "../components/mainComponentWrapper"
import UserDetails from "../components/userDetails"



const userDetailsWrapper = props => {
  const url = "http://localhost:5000/user/" + props.match.params.cn
  return (
    <MainComponentWrapper url={url}>
      <UserDetails />
    </MainComponentWrapper>
  )
}

const userWrapper = props => {

  const url = "http://localhost:5000/user"
  return (
    <MainComponentWrapper url={url}>
      <User />
    </MainComponentWrapper>
  )
}

const IndexPage = () => (

<div>
    <Router >
       <Layout>
         <Switch>
               <Route exact path="/users" component={userWrapper}/>
               <Route exact path="/users/:cn"  component={userDetailsWrapper} />
           </Switch>
        </Layout>
    </Router>
 </div>
)

export default IndexPage

Layout.jsx

import PropTypes from "prop-types"
import React from "react"
import { makeStyles } from "@material-ui/core/styles"
import Drawer from "@material-ui/core/Drawer"
import CssBaseline from "@material-ui/core/CssBaseline"
import List from "@material-ui/core/List"
import Divider from "@material-ui/core/Divider"
import ListItem from "@material-ui/core/ListItem"
import ListItemIcon from "@material-ui/core/ListItemIcon"
import ListItemText from "@material-ui/core/ListItemText"
import ExitToApp from "@material-ui/icons/ExitToApp"
import PeopleIcon from "@material-ui/icons/People"
import ListIcon from "@material-ui/icons/List"
import ComputerIcon from "@material-ui/icons/Computer"
import { navigate } from "gatsby"


const drawerWidth = 240

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  toolbar: theme.mixins.toolbar,
}))

function Layout({ children }) {

  const classes = useStyles()

    const handleRefresh = event => {
    window.location.replace("/");
  }

  const handleLogout = event => {
    localStorage.removeItem("access_token")
    window.location.replace("/")
  }
  return (
    <div className={classes.root}>
      <CssBaseline />
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.toolbar} />
        <List>
          <ListItem button onClick={(handleRefresh) => navigate("/users")}>
            <ListItemIcon>
              <PeopleIcon />
            </ListItemIcon>
            <ListItemText primary={"Users"} />
          </ListItem>
          <ListItem button onClick={() => navigate("/machines")}>
            <ListItemIcon>
              <ComputerIcon />
            </ListItemIcon>
            <ListItemText primary={"Machines"} />
          </ListItem>
          <ListItem button onClick={() => navigate("/audits")}>
            <ListItemIcon>
              <ListIcon />
            </ListItemIcon>
            <ListItemText primary={"Audit"} />
          </ListItem>
        </List>
        <Divider />
        <List>
          <ListItem button onClick={handleLogout}>
            <ListItemIcon>
              <ExitToApp />
            </ListItemIcon>
            <ListItemText primary={"Logout"} />
          </ListItem>
        </List>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        {children}
      </main>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout