Route + Render + Redirect с реакции-маршрутизатором-DOM

Question

Я только что принял проект React от одного из моих коллег, но я не могу понять логику в коде ниже.

      content = <Switch>
        <Route path="/login" exact component={LoginPage} />
        <Route render={() => { return <Redirect to="/login" />; }} />
      </Switch>

Я знаю, как использовать Route с Component, с Render, но Render с Redirect, когда я впервые увидел его.

Спасибо

Answer 1

Похоже, это просто еще один способ сказать:

<Redirect path='*' to='/login' />

Поскольку он находится внутри <Switch> и после любого <Route>, он всегда будет совпадать (если ничего выше него не найдено) и будет отображаться.

Когда компонент Redirect отображается, он выполняет свою работу по перенаправлению на страницу, указанную в to prop.

Я узнал об этом, прочитав исходный код. Если вам интересно, есть некоторая косвенность, но в основном компонент Redirect отображает компонент Lifecycle, который будет вызывать method с location, предоставленным, как только он смонтирован.

method устанавливается так:

const method = push ? history.push : history.replace;

И это так, потому что, по-видимому, компонент <Redirect> может принять push в качестве логического свойства, чтобы задать поведение того, как на самом деле достигается перенаправление.

---

Источник компонента перенаправления https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js

Источник компонента жизненного цикла: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Lifecycle.js