Как сделать такой роутер на react?

Question

[mamaanarhiya]

В общем есть страница, допустим, страница авторизации (/auth), мне нужно, чтобы при переходе, допустим, на /test отображалась та же самая страница авторизации с кое-какими изменениями, например, поле input дополнительное, либо другая текстовая информация. Возможно ли такое сделать? Не создавать же для отдельной страницы, которая по сути копия первой (с небольшими косметическими правками), отдельные компоненты и логику.

Comments

[Ninja Mate]

а в чем проблема сделать props пустой когда нужен test и просто добавлять input ?

Answer 1

[Максим]

Вопрос можно перефразировать так:
1) можно ли в реакте написать какой-то динамический шаблон
2) в зависимости от чего в моей задаче изменять шаблон

Ответы:
1) да, можно
2) можете завязаться, например, на window.location.pathname . Если там /auth - рисуете шаблон + такой-то набор инпутов или чего вам нужно, если там /test - то другой. Так же можно сразу в constructor в state установить какие-то параметры, на основе которых вы будете отображать шаблон и другие разные варианты.

В render функции это может выглядеть как-то так:

...
render() {
  let template
  if (window.location.pathname.indexOf('auth') !== -1) {
    template = <div>это auth</div>
  } else {
    template = <div>это не auth</div>
  }
  return template
} 
...

Answer 2

[Shane Matte]

React router v4 отлично переделали. Сначало не понятно было зачем так, казалось даже не удобно, но через час понял. Создавайте дефолтный темплейт и пиши компоненты.