Блог

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

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

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

Спасибо

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

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

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

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

Я выяснил это, немного почитав исходный код. Если вам интересно, есть небольшая косвенность, но в основном компонент перенаправления отображает компонент жизненного цикла, который будет вызываться 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