React Routing - Как загрузить всплывающее окно с использованием маршрутов

Question

Что у меня есть: 1. Компонент входа в систему 2. Компонент регистрации

В компоненте входа есть ссылка, называемая регистром.Он направляет его на страницу регистрации.Код прост:

<Link to='/register' className='links align-left'>Register</Link>

Я хочу вместо этого показать компонент регистра во всплывающем окне.Я знаю, что могу использовать компонент диалога и показывать компонент регистра в этом диалоге.Легко, но я не понимаю, как я могу настроить свою маршрутизацию, чтобы она показывала окно входа в систему и загружала компонент регистрации во всплывающем окне.Позвольте мне объяснить на примере.Посмотрите, как работает доска Trello на следующем скриншоте.URL-адрес https://trello.com/b/i1QoQatf/

Теперь, когда я нажимаю на элемент, он показывает всплывающее окно, как на следующем скриншоте. Обратите внимание, что сейчас URL-адрес https://trello.com/c/QisVDEgX/639-sort-all-dropdowns-alphaetically

Теперь я в замешательстве: как мне достичьТо же самое для моего компонента Login и Register. Если я загружу свою маршрутизацию следующим образом:

<Route path='/register' component={RegisterComponent} />

Это вызовет метод рендеринга компонента Register, а затем только загрузит компонент Register. Как я могу направить его в RegisterКомпонент, и все еще использовать Войти в фоновом режиме. Любая помощь, пожалуйста?

Answer 1

Добавление моего решения здесь, чтобы люди поняли концепцию маршрутизации.

Это на самом деле довольно легко, если вы используете NextJS.В NextJS нам нужно использовать сервер (например, экспресс) для маршрутизации.Маршрутизатор NextJS очень силен и обеспечивает большую гибкость.Кроме того, тег NextJS Link является также мощнымНиже приведено объяснение того, как выполнить URL-маршрутизацию без загрузки страницы.

В общем, вы можете перейти на страницу двумя способами.1. Нажав на ссылку / кнопку (например, Зарегистрируйтесь сейчас) 2. Вставив URL-адрес прямо в браузер.Допустим, у меня есть два URL:

1. https://example.com/login
2. https://example.com/register

Теперь я хочу достичь, когда я нажимаюссылка «Зарегистрироваться сейчас» на моей странице входа в систему, она должна направить мою страницу в / зарегистрироваться, но при этом по-прежнему отображать страницу входа в фоновом режиме и всплывающую форму регистрации.Но помните, я хочу добиться этого, убедившись, что компонент Login не загружается дважды.

С NextJS, следующим будет способ сделать это:

1. Мы будемсоздание следующей страницы js с именем account.js
2. Для маршрутизации на нашу страницу входа ссылка на экран входа в систему будет выглядеть примерно так:

    <Link href={{pathname: '/account', query: { mode: 'login' }}} as {'/login}>
    <a>Login</a>
    </Link> 

Страница ссылки будет маршрутизироватьсянам на страницу аккаунтов.

Если вы заметили, тег ссылки не является нормальным href.Приведенный выше тег ссылки означает: «мы хотим перейти на страницу учетной записи, но отображаем URL-адрес как« / login », а когда мы отображаем страницу учетной записи, отправляем запрос {mode: 'login'} объекту маршрутизатора страниц учетной записи.

В функции визуализации страницы учетной записи мы можем легко принимать решение во время выполнения на основе объекта запроса маршрутизатора.

      render() {
        const mode = this.props.router.query.mode;


        return (
          <div>
            <LoginComponent></LoginComponent>
            {/* the following line will open the register component in a popup */}
            {mode === 'registration' && <PopUp><RegisterComponent></RegisterComponent></PopUp>}
          </div>
        )

      }

В компоненте входа в систему мы добавим ссылку для регистрации, как показано ниже:

        <Link href={{pathname: '/account', query: { mode: 'registration' }}} as={`/`}>
          <a>Register Now</a>
        </Link>

В приведенном выше примере все, что мы сделали, это создали страницу с именем account.js.Мы убедились, что когда мы направляемся в окно входа в систему, мы направляем его на страницу аккаунтов, но отправляем режим: «вход».Когда мы нажимаем на ссылку регистрации, мы загружаем ту же страницу - accounts.js, но в другом режиме: «регистрация».Функция рендера откроет компонент регистра в всплывающем окне, потому что режим === 'регистрация'.В url адрес будет отображаться как '/ register'

Обратите внимание: это просто пример кода для справки. Это ни в коем случае не проверенный код, поэтому имейте это в виду.

Answer 2

Я думаю, что для достижения этого ваш RegisterComponent должен будет визуализировать компонент входа в систему и всплывающее окно регистрации.

В вашей функции визуализации вы вернетесь, где RegisterPopup - это ваша форма регистрации, отображаемая во всплывающем окне (предположим, реагирует на модальность)

<React.Fragment>
    <LoginComponent/>
    <RegisterPopup/>
</React.Fragment>