javascript - react-router 无法跳转到页面
问题描述
我正在为我的项目使用 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>
);
}
}
如果我单击 Edit 按钮,它应该会跳转到 EditRestaurant 组件,因为我已经在 App.js 中定义了 Route。但是当我点击按钮时,只有 url 改变,页面停留在 UserRestaurant 组件中。
解决方案
<Route/>
除非您添加exact
道具,否则A会在 URL 上进行部分匹配。换句话说,/userrestaurant/edit/blah
仍然匹配 的第一种情况Switch
,所以UserRestaurant
仍然被渲染。要么添加exact
,所以第一个仍然不匹配第二个 URL,或者重新排序你的路线,以便更具体的路线首先出现。
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>
);
}
}
推荐阅读
- nlp - 在 BertForMaskedLM 中,masked_lm_labels 参数如何工作?
- python - 我如何改变乌龟的颜色,而不是笔?
- sql - SQL Server 2019。需要更新特定行中的特定列
- express - 当内容类型和内容编码标头一起发送时,expressjs拒绝发布请求(400错误请求)
- ios - 在应用程序中打开应用程序,或者如果尚未下载,则进入应用程序商店 (iOS)
- vb.net - 如何让用户选择数据库的名称?
- python - 与他人共享 Python 程序
- google-sheets - Google Sheets importXML Returns Empty Value
- http - PPST request is working as GET Request in Globiflow
- python - Expense calculator gives result instead of asking user for input