我正在为我的项目使用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组件中。
发布于 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>
);
}
}
https://stackoverflow.com/questions/52883765
复制相似问题