时间戳

首页 > 解决方案 > React Router 更改 URL，但视图没有改变，但是如果我在 url 位于浏览器选项卡上时按 Enter 键，它会改变

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

问题描述

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

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

用户.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

用户.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>
   )
}

标签： reactjs

解决方案

    <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在路由组件中添加 prop。

推荐阅读