gpt4 book ai didi

javascript - React-Router无法跳转到页面

转载 作者:行者123 更新时间:2023-12-01 01:35:19 27 4
gpt4 key购买 nike

我正在我的项目中使用react-router-dom,但我是个新手。我遇到了页面跳转的问题,这是我的App.js代码:

 class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route
path="/userrestaurant"
render={props => <UserRestaurant {...props} />}
/>
<Route path="/userrestaurant/edit/:id" component={EditRestaurant} />
</Switch>
</div>
);
}
}

export default App;

以下是 UserRestaurant 组件的代码:

 export default class UserRestaurant extends Component {
edit = () => {
var restId = 4;
this.props.history.push(`/userrestaurant/edit/${restId}`);
};

render() {
return (
<div>
<Button onClick={this.edit}>Edit</Button>
</div>
);
}
}

如果我单击“编辑”按钮,它应该跳转到 EditRestaurant 组件,因为我已经在 App.js 中定义了路线。但是当我单击按钮时,只有 url 发生变化,页面保留在 UserRestaurant 组件中。

最佳答案

一个<Route/>除非您添加 exact ,否则会对 URL 进行部分匹配支柱。换句话说,/userrestaurant/edit/blah仍然匹配 Switch 的第一个案例,所以UserRestaurant仍然被渲染。添加 exact因此第一个网址仍与第二个网址不匹配,或者重新排序您的路线,以便更具体的网址排在第一位。

class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route
path="/userrestaurant"
exact
component={UserRestaurant}
/>
<Route
path="/userrestaurant/edit/:id"
component={EditRestaurant} />
</Switch>
</div>
);
}
}

关于javascript - React-Router无法跳转到页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52883765/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com