Как проложить маршрут к другому компоненту и заменить текущий компонент?

Question

Я работаю над приложением обмена сообщениями, использующим ReactJS и MaterialUI для создания тем. У меня есть панель приложений и постоянный ящик, и я хочу отобразить входящие, отправленные и новые компоненты сообщений в оставшейся области.

Я использую маршруты в родительском компоненте входящих и исходных компонентов, чтобы изменить URL при отображении этих компонентов (/ messages / inbox и / messages / sent). Теперь я хочу отобразить новый компонент сообщения, когда нажата кнопка «+» во входящих или отправленных компонентах, отменить визуализацию текущего компонента и изменить URL-адрес на / messages / new.

Я знаю, что могу условно визуализировать компонент NewMessage, установив переменную логического состояния, но это все равно не изменит URL.

Я не знаю, как это сделать, и хотел бы получить совет.

Спасибо.

Answer 1

Вы можете использовать компонент Link из response-router-dom, который приведет их к / messages / new компоненту.Вы можете узнать больше об этом здесь .Надеюсь, это поможет.

Answer 2

К, ребята, я понял это. У меня был файл компонента «Навигация», содержащий мою панель приложений и ящик, в котором были «Маршруты к моей входящей почте» и отправленные компоненты. в моих компонентах входящих / отправленных я хотел иметь ссылку на компонент NewMessage, который заменит текущий компонент входящих / отправленных. Я обнаружил, что если я добавлю маршрут к NewMessage в моем компоненте навигации, <Route exact path="/messages/new" component={NewMessage} />, и в моем компоненте входящих / отправленных, добавьте что-то вроде:

<Fab color="primary" label="New" component={Link} to="/messages/new">
  <AddIcon />
</Fab>

Маршруты в порядке. Возможно, я до сих пор не понял отношения между родителями и детьми в ReactJS, но я смог решить эту проблему, выполнив это.

Спасибо всем за ваше время.

Answer 3

вы можете использовать <Link to ="/path here" > + </Link>

или

вы можете программно перемещаться, используя this.props.history.push("/path"), который передается от исторического реквизита отметьте здесь , когда вы делаете событие click (обратите внимание на импорт с помощью Router, если реквизиты недоступны с информацией о маршруте здесь)

и добавьте свой <Route path ="" component={}/> соответственно

надеюсь, это поможет ..