Почему не рендерится компонент в React router v4?

Question

[rinatoptimus]

В разделе Categories есть несколько пунктов: Shoes, Boots и тд. У них рендеринг HTML-элементов прописан прямо в теге . Вот так:

<Route path={`${match.path}/:name`} render={
  ({ match }) => (<div><h3> {match.params.name} </h3></div>)
} />

Решил создать пункт, нажимая на который будет отрисовываться отдельный компонент One:
<Route path="/one" component={One} />
Не работает, ошибок нет.
Вот ссылка.

UPDATE: поправил, но теперь в адресной строке дважды прописывается "category".

Answer 1

[rinatoptimus]

Методом тыка настроил таким образом:

<ul>
        <li><Link to={`${match.url}/shoes`}>Shoes</Link></li>
        <li><Link to={`${match.url}/boots`}>Boots</Link></li>
        <li><Link to={`${match.url}/footwear`}>Footwear</Link></li>
        <li><Link to={`${match.url}/hats`}>Hats</Link></li>

        <li>
          <Link to={`${match.path}/one`}>One</Link>
        </li>
      </ul>
      <Switch>
      <Route path={`${match.path}/:name`} render={
        ({ match }) => (<div><h3> {match.params.name} </h3></div>)
      } />
      <Route path={`${match.path}/one`} render={
          ({ match }) => ({ One })
      } />
      </Switch>

Не знаю, может быть, это костыль, но работает.

Answer 2

[0xD34F]

А если так?

Link - аналогично прочим, Route - первым, до общего.

Comments

[rinatoptimus]

Спасибо, ваш пример тоже работает (свое решение написал выше). Осталось только выяснить, как все-таки правильно, почему-то нигде не нашел урока на эту тему...