react-router无法跳转到页面
react-router无法跳转到页面
提问于 2018-10-19 07:07:31
我正在为我的项目使用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组件中。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-19 07:14:00
除非添加exact属性，否则<Route/>会对URL进行部分匹配。换句话说，/userrestaurant/edit/blah仍然匹配Switch的第一个大小写，所以仍然呈现UserRestaurant。要么添加exact，使第一个URL不再与第二个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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52883765
复制相关文章
相似问题