[英]React Router Changes URL, but view does't change, but if i press enter when the url is on the browser tab it does
I have a page that renders a list of users, each user is a link that get's the user details.我有一个呈现用户列表的页面,每个用户都是一个获取用户详细信息的链接。 My list displays well, when i click a user the url changes but the view don't, but if i press enter again on that url the view changes to the details of that user, and after this when i am in the details page if i press the users list button in my layout the url changes but nothing happens again.
我的列表显示良好,当我单击用户时,url 会更改,但视图不会更改,但是如果我在该 url 上再次按 Enter 键,视图将更改为该用户的详细信息,然后当我在详细信息页面中时,如果我在我的布局中按下用户列表按钮,url 发生变化,但没有再次发生。
I have tried some solutions that i saw similar but no success我尝试了一些我看到类似但没有成功的解决方案
Users.js用户.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用户.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 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>
)
}
<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>
Move both routes as children in the switch component, and add the exact
prop in route component.将两条路由作为子组件移动到 switch 组件中,并在路由组件中添加
exact
prop。
I think you need to wrap the component inside withRouter HOC , you can do this我认为您需要将组件包装在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> )
Also the component name should start with a Capital letter此外,组件名称应以大写字母开头
Hope it helps希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.