React Router 更改 URL，但视图没有更改，但是如果我在 url 在浏览器选项卡上时按 Enter 键，它会更改答案

【问题标题】：React Router Changes URL, but view does't change, but if i press enter when the url is on the browser tab it doesReact Router 更改 URL，但视图没有更改，但是如果我在 url 在浏览器选项卡上时按 Enter 键，它会更改
【发布时间】：2019-10-22 18:17:40
【问题描述】：

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

我尝试了一些我看到类似但没有成功的解决方案

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

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>
  )
}

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>
   )
}

【问题讨论】：

试试
@bakar_dev 没用

标签： reactjs

【解决方案1】：

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

           </Switch>

       </div>
    </Router>

将两个路由作为子组件移动到 switch 组件中，并在路由组件中添加 exact 属性。

【讨论】：

尝试从第一条路由中移除 MainComponentWrapper。我认为您不需要它，因为它在第二条路线中可用
我确实尝试过，但没有：)
看我更新的答案，你必须改变路线的位置。

【解决方案2】：

我认为你需要将组件包裹在withRouter 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> )

组件名称也应以大写字母开头

希望对你有帮助

【讨论】：