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

Question

我正在我的项目中使用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 组件中。

Answer 1

一个<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>
    );
  }
}