Реактив-роутер не может перейти на страницу - PullRequest
Новая
       28

Реактив-роутер не может перейти на страницу

0 голосов
/ 19 октября 2018

Я использую 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 Ответ

0 голосов
/ 19 октября 2018

A <Route/> выполняет частичное сопоставление URL-адресов, если вы не добавите exact проп.Другими словами, /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>
    );
  }
}
...