React Router: маршрут с вложенными параметрами не поражен

В моем приложении для реагирования я настроил такие маршруты

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Route exact path="/" component={PostList} />
        <Route exact path="/:category" component={PostList} />
        <Route exact path="/:category/:postid" component={PostDetails} />
      </div>
    );
  }
}

/ и foo прекрасно отображают компонент PostList. Но когда я пытаюсь получить доступ к компоненту PostDetails, например, с помощью /foo/bar, он не попадает.

Я пытался поиграться с порядком определения маршрута, а также с реквизитом exact, но безуспешно. Не получая никаких ошибок, инспектор в devtools просто не показывает вывод, где должен находиться компонент.

Что мне здесь не хватает? Я использую [email protected].


reactjs react-router-dom react-router
person Hinrich    schedule 17.01.2018    source источник
comment
Какова ваша точная структура маршрута, какие-либо родительские маршруты или дети?   -  person Shubham Khatri    schedule 17.01.2018
comment
@ShubhamKhatri Нет, это все. Обновлен код, чтобы вы могли видеть весь компонент.   -  person Hinrich    schedule 17.01.2018
comment
Когда вы нажмете /foo/bar, вы хотите, чтобы отображались PostList И PostDetails или ТОЛЬКО PostDetails?   -  person ChrisR    schedule 17.01.2018
comment
Я не уверен, что это сработает, но из любопытства, что произойдет, если вы обернете компоненты <Route /> компонентом <Switch>? (импортируйте его из react-router-dom)   -  person casraf    schedule 17.01.2018
comment
вы используете BrowserRouter, а также как вы посещаете /foo/bar   -  person Shubham Khatri    schedule 17.01.2018
comment
Я хочу показывать только один компонент за раз. Я добавил компонент Switch, но никакой разницы. Я посещаю этот URL http://localhost:3000/foo/bar в браузере. Я не использую BrowserRouter (может быть, я должен?)   -  person Hinrich    schedule 17.01.2018
comment
Если вы не используете browserRouter, вам следует посетить http://localhost:3000/#/foo/bar   -  person Shubham Khatri    schedule 17.01.2018
comment
О, я на самом деле использую Browser Router. Извините, что перепутал и внес путаницу.   -  person Hinrich    schedule 17.01.2018
comment
Оберните свои маршруты в <Switch> и маршрут /:foo/:bar перед /:foo в вашей функции рендеринга. Вот пример github.com/strapi/strapi/blob/master/packages/   -  person soupette    schedule 17.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы отображался только один из маршрутов, используйте Switch. .

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Switch>
            <Route exact path="/" component={PostList} />
            <Route exact path="/:category" component={PostList} />
            <Route exact path="/:category/:postid" component={PostDetails} />
        </Switch>
      </div>
    );
  }
}
person ChrisR    schedule 17.01.2018
comment
ОП использует точное и, следовательно, Switch здесь вообще не будет иметь значения - person Shubham Khatri; 17.01.2018
comment
Я попробовал это, и на самом деле это не имело значения. - person Hinrich; 17.01.2018

arrow_upward
0
arrow_downward

Я нашел решение. Это была просто опечатка в экспорте такого компонента

export { defaut as PostDetails } from './post-details/PostDetails'

отсутствует l по умолчанию.

Как ни странно, у меня не было ошибок при транспиляции. Извините, люди, и спасибо за ваши усилия!

person Hinrich    schedule 17.01.2018