Reactjs React路由器更改URL，但view不更改'；不会更改，但如果在url位于浏览器选项卡上时按enter键，则会更改

我有一个页面，呈现一个用户列表，每个用户都是一个链接，可以获取用户详细信息。 我的列表显示得很好，当我单击某个用户时，url会更改，但视图不会更改，但如果我再次按该url上的enter键，视图会更改该用户的详细信息，然后当我在详细信息页面中时，如果我按布局中的用户列表按钮，url会更改，但不会再次发生任何变化

我尝试过一些类似的解决方案，但没有成功

Users.js

import React from "react"
import { BrowserRouter as Router, Route, withRouter,Switch} 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 roleWrapper = props => {
  const url = "http://localhost:5000/user/" + props.match.params.cn
  return (
    <MainComponentWrapper url={url}>
      <UserDetails />
    </MainComponentWrapper>
  )
}

const IndexPage = () => (
 <Layout>
    <Router>
      <div>
         <Switch>
               <Route exact path="/users" component={User}>
                    <MainComponentWrapper url="http://localhost:5000/user">
                         <User />
                     </MainComponentWrapper>
                 </Route>
           </Switch>
                <Route path="/users/:cn"  component={roleWrapper} />
       </div>
    </Router>
 </Layout>

)

export default IndexPage

从“React”导入React
从“react Router dom”导入{BrowserRouter as Router，Route，withRouter，Switch}
从“./组件/布局”导入布局
从“./组件/用户”导入用户
从“./components/MainComponentWrapper”导入MainComponentWrapper
从“./components/UserDetails”导入用户详细信息
常量roleWrapper=props=>{
常量url=”http://localhost:5000/user/“+props.match.params.cn
返回(
)
}
常量索引页=（）=>(
)
导出默认索引扩展

users.jsx

export default function User({ data })  {
  const classes = useStyles()

  return (

    <div className={classes.root} >

      <h1>Users</h1>
      <Table className={classes.table} size="small">
        <TableBody>
            {data.map((cn) => (
            <TableRow key={cn}>

              <TableCell align="left" >
              <Button >
                 <Link style={{ color: 'inherit', textDecoration: 'inherit'}} to={`/users/${cn}`} >{cn}</Link>
                 </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

    </div>
  )
}

导出默认函数用户（{data}）{
常量类=useStyles（）
返回(
使用者
{data.map（（cn）=>(
{cn}
))}
)
}

userDetails.jsx

export default function UserDetails({ data }) {


  return (
    <div>
      <h1>User Details</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">cn</TableCell>
            <TableCell align="left">description</TableCell>
            <TableCell align="left">mail</TableCell>
            <TableCell align="left">ou</TableCell>
            <TableCell align="left">sn</TableCell>
            <TableCell align="left">uid</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            {Object.entries(data).map(([key, value])=> (
              <TableCell align="left" key={key}> {value[0]}</TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>

    </div>
   )
}

导出默认函数UserDetails（{data}）{
返回(
用户详细信息
cn
描述
邮件
欧点
锡
液体
{Object.entries（data.map）（[key，value]）=>(
{value[0]}
))}
)
}

---

在交换机组件中作为子级移动两条路由，并在路由组件中添加

精确的
道具。
我认为您需要使用路由器HOC将组件包装在中，您可以这样做

const IndexPage = () => (
  <Layout>
  <Router>
    <div>
     <Switch>
           <Route exact path="/users" component={withRouter(User)}>
                <MainComponentWrapper url="http://localhost:5000/user">
                     <User />
                 </MainComponentWrapper>
             </Route>
       </Switch>
            <Route path="/users/:cn"  component={withRouter(roleWrapper)} />
    </div>
  </Router>
  </Layout> )

constindexpage=（）=>(
)

此外，组件名称应以大写字母开头

希望有帮助
Try@bakar_dev没有成功尝试从第一条路径内部删除MainComponentWrapper。我不认为你需要它，因为它在第二条路线上是可用的。我试过了，什么也没有：）看我更新的答案，你必须改变路线的位置。