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

由于我已经在App.js中定义了Route，因此如果单击“编辑”按钮，则应该跳转到EditRestaurant组件。但是，当我单击按钮时，只有url更改，该页面保留在UserRestaurant组件中。

Answer 1

除非您添加exact道具，否则<Route/>会对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>
    );
  }
}

react-router无法跳转到页面

1 个答案: